zepto实现移动端轮播图

      zepto是一个移动端的框架，语法几乎跟jQuery一样，但是因为移动端模块化开发的思想所以zepto较多的应用于移动端，节省移动端的流量，虽然现在4G时代的到来，流量的价格很便宜，但是zepto对于移动端有着很好的SEO优化效果！

  那么我们就开始这个轮播图的实现，前面的博客中，轮播图的思路已经有了我们这里主要是熟悉zepto的语法和一些使用时的注意事项！

    首先导包，模块化开发就是你需要什么包就导入什么包

    

<!-- 导入zepto --><script type="text/javascript" src='js/zepto.js'></script><!-- touch事件 --><script type="text/javascript" src='js/touch.js'></script><!-- 动画 --><script type="text/javascript" src='js/fx.js'></script><!-- 导入event --><script type="text/javascript" src='js/event.js'></script>

    接下来就是html代码

<!--  轮播的图片 --><ul class="banner_imgs clearfix"><li class="f_l"><a href="#"><img src="images/l8.jpg" alt=""></a></li><li class="f_l"><a href="#"><img src="images/l1.jpg" alt=""></a></li><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><li class="f_l"><a href="#"><img src="images/l5.jpg" alt=""></a></li><li class="f_l"><a href="#"><img src="images/l6.jpg" alt=""></a></li><li class="f_l"><a href="#"><img src="images/l7.jpg" alt=""></a></li><li class="f_l"><a href="#"><img src="images/l8.jpg" alt=""></a></li><li class="f_l"><a href="#"><img src="images/l1.jpg" alt=""></a></li></ul><!-- ul.banner_index.clearfix>li.f_l*8 --><!-- 索引的 li标签 --><ul class="banner_index clearfix"><li class="f_l current"></li><li class="f_l"></li><li class="f_l"></li><li class="f_l"></li><li class="f_l"></li><li class="f_l"></li><li class="f_l"></li><li class="f_l"></li></ul></div>

     接下来是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//和下面小圆点的indexvar 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();});});