图片轮播

1.使用swiper插件，swiper官方网址http://www.swiper.com.cn/demo/index.html

html部分：

<div class="swiper-container swiper-container-horizontal">
<div class="swiper-wrapper" style="transform: translate3d(-7636px, 0px, 0px); transition-duration: 0ms;">
<div class="swiper-slide">
<a><img src="img/1.jpg" /></a>
</div>
<div class="swiper-slide">
<a><img src="img/2.jpg" /></a>
</div>
<div class="swiper-slide">
<a><img src="img/3.jpg" /></a>
</div>
<div class="swiper-slide">
<a><img src="img/4.jpg" /></a>
</div>

</div>

<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>

<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>

插入script：

<script src="js/swiper.min.js"></script>
<script>
var swiper = new Swiper(‘.swiper-container‘, {
pagination: ‘.swiper-pagination‘,
nextButton: ‘.swiper-button-next‘,
prevButton: ‘.swiper-button-prev‘,
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false
});
</script>

2.使用mui插件

html部分：

<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="img/yuantiao.jpg">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="img/shuijiao.jpg">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="img/muwu.jpg">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="img/cbd.jpg">
</a>
</div>
<!-- 第四张 -->
<div class="mui-slider-item">
<a href="#">
<img src="img/yuantiao.jpg">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="img/shuijiao.jpg">
</a>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>

script部分：

<script src="js/mymui.min.js"></script>
<script type="text/javascript" charset="utf-8">

//设置图片自动轮播
var slider = mui("#slider");
slider.slider({
interval: 5000
});

//设置开关按钮判断图片是否自动轮播

mui.init({
swipeBack: false //启用右滑关闭功能
});
var slider = mui("#slider");
document.getElementById("switch").addEventListener(‘toggle‘, function(e) {
if(e.detail.isActive) {
slider.slider({
interval: 5000
});
} else {
slider.slider({
interval: 0
});
}
});

</script>

图片轮播

原文：http://www.cnblogs.com/bkyj/p/6421800.html