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




});