zepto是一個移動端的框架，語法幾乎跟jQuery一樣，
首先需要引入你需要的插件，需要什么就引入什么。
<!-- 導入zepto -->
<script type="text/javascript" src='js/zepto.js'></script>
<!-- touch事件 -->
<script type="text/javascript" src='js/touch.js'></script>
html代碼：
<!-- 輪播的圖片 -->
<ul class="banner_imgs clearfix">
<li class="f_l"><a href="#"><img src="images/l2.jpg" alt=""></a></li>
<li class="f_l"><a href="#"><img src="images/l3.jpg" alt=""></a></li>
<li class="f_l"><a href="#"><img src="images/l4.jpg" alt=""></a></li>
</ul>
<!-- 索引的 li標簽 -->
<ul class="banner_index clearfix">
<li class="f_l"></li>
<li class="f_l"></li>
<li class="f_l"></li>
</ul>
css代碼：
.jd_banner .banner_imgs {
width: 1000%;
transform: translateX(-10%);
transition: all .3s;
}
.jd_banner .banner_imgs li {
width: 10%;
}
.jd_banner .banner_imgs li a {
display: block;
width: 100%;
}
.jd_banner .banner_imgs li a img {
width: 100%;
display: block;
}
.jd_banner .banner_index {
position: absolute;
bottom: 5px;
left: 50%;
margin-left: -48px;
}
.jd_banner .banner_index li {
/* 所有li的通用樣式 */
width: 6px;
height: 6px;
border-radius: 3px;
border: 1px solid white;
margin: 0 3px;
}
.jd_banner .banner_index li.current {
/* 當li標簽 擁有 .current的時候 會使用該樣式 */
background-color: white;
}
js代碼：
$(function(){
//自動輪播
//第一步獲取一些必要的值比如說索引，屏幕寬度，移動的ul
//和下面小圓點的index
var index=1;
var width=$('body').width();
var moveUl=$('.banner_imgs');
var index_li=$('.banner_index li');
//封裝ul移動的方法
var animateMoveUl=function(){
moveUl.animate({
"transform":"translate("+index*width*-1+"px)"
},300,"ease",function() {
if(index>=9){
index=1;
moveUl.css({"transiton":"none","transform":"translate("+index*width*-1+"px)"});
}else if(index<=0){
index=8;
moveUl.css({"transiton":"none","transform":"translate("+index*width*-1+"px)"});
}
//修改index的值
index_li.removeClass('current').eq(index-1).addClass('current');
//判斷timeId的值如果為undefined說明我們干掉了計時器這是要重新開啟定時器
if(timeId==undefined){
timeId = setInterval(function(){
index++;
animateMoveUl();
},1000);
}
});
};
//定時器自動輪播
var timeId=setInterval(function(){
//對index進行累加
index++;
//調用移動ul的方法
animateMoveUl();
},1000);
//左右滑動的右滑動
moveUl.swipeRight(function(){
clearInterval(timeId);
//這里要記住盡管計時器清楚了但是timeId一直都在 timeId=undefined;
index--;
//調用移動ul的方法
animateMoveUl();
});
moveUl.swipeLeft(function(){
clearInterval(timeId);
//這里要記住盡管計時器清楚了但是timeId一直都在 timeId=undefined;
index++;
//調用移動ul的方法
animateMoveUl();
});
});