直接引入文档,轮播图只能手动切换,不能自动轮播,是初始化代码有问题
mui写的实例,div代码块
<div id="slider" class="mui-slider" >
<div class="mui-slider-group mui-slider-loop" id="stul">
<!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="imgs/img_home_banner4.jpg">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="imgs/img_home_banner1.jpg">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="imgs/img_home_banner2.jpg">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="imgs/img_home_banner3.jpg">
</a>
</div>
<!-- 第四张 -->
<div class="mui-slider-item">
<a href="#">
<img src="imgs/img_home_banner4.jpg">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="imgs/img_home_banner1.jpg">
</a>
</div>
</div>
<div class="mui-slider-indicator" id="sliin">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
js代码块
<script type="text/javascript">
mui.init({
});
mui.ready(function(){
mui(".mui-scroll-wrapper").scroll({
bounce: true //是否启用回弹
});
});
var gallery = mui('.mui-slider');
gallery.slider({
interval:2000//自动轮播周期,若为0则不自动播放,默认为0;
});
</script>