嗞嗞嗞~ 你的浏览器仿佛在对我微笑!

YDUI Touch Docs 返回首页

Slider

1、说明

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

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

2、可用参数

2.1、主要包含3个参数:

<script>
$('#content').slider({
speed: 300, /* 移动速度【单位:毫秒,默认:300ms】*/
autoplay: 3000, /* 自动播放时间【单位:毫秒,默认3000ms,设置为0则不自动播放】*/
lazyLoad: false /* 是否延迟加载图片【需将图片的src属性替换成data-src,默认false】*/
});
</script>

3、调用方式一(Javascript API)

3.1、延迟加载图片,将原src属性替换为data-src;

<div class="m-slider" id="J_Slider">
<div class="slider-wrapper">
<div class="slider-item">
<a href="#">
<img src="../img/default.jpg" data-src="../img/banner_1.jpg">
</a>
</div>
<div class="slider-item">
<a href="#">
<img src="../img/default.jpg" data-src="../img/banner_2.jpg">
</a>
</div>
<div class="slider-item">
<a href="#">
<img src="../img/default.jpg" data-src="../img/banner_3.jpg">
</a>
</div>
</div>
<div class="slider-pagination"></div><!-- 分页标识 -->
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="path/build/js/ydui.js"></script>
<script>
$('#J_Slider').slider({
speed: 200,
autoplay: 2000,
lazyLoad: true
});
</script>

4、调用方式二(Data API)

4.1、在.m-slider容器上添加data-ydui-slider属性,并设置相应参数;

<div class="m-slider" data-ydui-slider="{autoplay: 5000}"><!-- 参数在这里 -->
<div class="slider-wrapper">
<div class="slider-item">
<a href="http://www.ydcss.com">
<img src="../img/banner_1.jpg">
</a>
</div>
<div class="slider-item">
<a href="http://www.ydcss.com">
<img src="../img/banner_2.jpg">
</a>
</div>
<div class="slider-item">
<a href="http://www.ydcss.com">
<img src="../img/banner_3.jpg">
</a>
</div>
</div>
<div class="slider-pagination"></div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="path/build/js/ydui.js"></script>

5、参与讨论

5.1、有任何使用问题,请在评论中留言,也欢迎大家发表意见、建议。感谢您对YDUI的支持。