zepto实现轮播图

标签：tom   ref   定时   javascrip   轮播   remove   else   src   开启   

 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();  

    });

});  

zepto实现轮播图

标签：tom   ref   定时   javascrip   轮播   remove   else   src   开启   

原文地址：http://www.cnblogs.com/liangxiaoli/p/7100825.html