zepto实现轮播图
Posted 秋水涴晴汐
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了zepto实现轮播图相关的知识，希望对你有一定的参考价值。
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实现轮播图的主要内容，如果未能解决你的问题，请参考以下文章