zepto实现移动端轮播图 Web前端

zepto是一个移动端的框架，语法几乎跟jQuery一样，但是因为移动端模块化开发的思想所以zepto较多的应用于移动端，节省移动端的流量，虽然现在4G时代的到来，流量的价格很便宜，但是zepto对于移动端有着很好的SEO优化效果！
那么我们就开始这个轮播图的实现，前面的博客中，轮播图的思路已经有了我们这里主要是熟悉zepto的语法和一些使用时的注意事项！
首先导包，模块化开发就是你需要什么包就导入什么包

接下来就是html代码

文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片

接下来是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额代码 【zepto实现移动端轮播图】

//别忘记写入口函数 $(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(); }); });