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

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