YDUI Touch Docs 返回首页

Slider

1、说明

1.1、示例：http://m.ydui.org/html/slider.html

1.2、移动端高效图片轮播插件；借鉴 Bootstrap 先进思想，支持Data API 和 Javascript API方式调用；

2、调用

调用方式一（Javascript API）

若需延迟加载图片，则将 原src 属性替换为 data-src。

<div class="m-slider" id="J_Slider">
    <div class="slider-wrapper">
        <div class="slider-item">
            <a href="#">
                <img src="http://static.ydcss.com/uploads/ydui/1.jpg">
            </a>
        </div>
        <div class="slider-item">
            <a href="#">
                <img src="http://static.ydcss.com/uploads/ydui/2.jpg">
            </a>
        </div>
        <div class="slider-item">
            <a href="#">
                <img src="http://static.ydcss.com/uploads/ydui/3.jpg">
            </a>
        </div>
    </div>
    <div class="slider-pagination"></div><!-- 分页标识 -->
</div>
<script>
    $('#J_Slider').slider({
        speed: 200,
        autoplay: 2000,
        lazyLoad: true
    });
</script>
调用方式二（Data API）

在 .m-slider 容器上添加 data-ydui-slider 属性，并设置相应参数。

<div class="m-slider" data-ydui-slider="{autoplay: 3000}"><!-- 参数在这里 -->
    <div class="slider-wrapper">
        <div class="slider-item">
            <a href="#">
                <img src="http://static.ydcss.com/uploads/ydui/1.jpg">
            </a>
        </div>
        <div class="slider-item">
            <a href="#">
                <img src="http://static.ydcss.com/uploads/ydui/2.jpg">
            </a>
        </div>
        <div class="slider-item">
            <a href="#">
                <img src="http://static.ydcss.com/uploads/ydui/3.jpg">
            </a>
        </div>
    </div>
    <div class="slider-pagination"></div><!-- 分页标识 -->
</div>

3、参数

参数说明类型可选值默认值
speed 切换速度（单位毫秒） Number - 300
autoplay 自动播放时间（单位毫秒） Number - 3000
lazyLoad 是否延迟加载图片 Boolean - false