zepto轮播图
Posted cycczh
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了zepto轮播图相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
<title>Title</title>
<style>
*
margin: 0;
padding: 0;
box-sizing: border-box;
li
list-style: none;
.clearFix:after,
.clearFix:before
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
display: block;
content: "";
.container
max-width: 640px;
min-width: 320px;
margin: 0 auto;
position: relative;
overflow: hidden;
.container>ul:first-child
width: 1000%;
transform: translateX(-10%);
.container>ul:first-child>li
width: 10%;
float: left;
.container>ul:first-child>li>a
display: block;
width: 100%;
.container>ul:first-child>li>a>img
display: block;
width: 100%;
.container>ul:last-child
position: absolute;
left: 50%;
margin-left: -66px;
bottom: 6px;
.container>ul:last-child>li
float: left;
width: 12px;
height: 12px;
border-radius: 50%;
background: pink;
margin-left: 6px;
.container>ul:last-child>li.active
background: red;
</style>
</head>
<body>
<div class="container">
<ul class="clearFix">
<li><a><img src="images/l8.jpg"></a></li>
<li><a><img src="images/l1.jpg"></a></li>
<li><a><img src="images/l2.jpg"></a></li>
<li><a><img src="images/l3.jpg"></a></li>
<li><a><img src="images/l4.jpg"></a></li>
<li><a><img src="images/l5.jpg"></a></li>
<li><a><img src="images/l6.jpg"></a></li>
<li><a><img src="images/l7.jpg"></a></li>
<li><a><img src="images/l8.jpg"></a></li>
<li><a><img src="images/l1.jpg"></a></li>
</ul>
<ul class="clearFix">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="js/zepto/zepto.min.js"></script>
<script src="js/zepto/selector.js"></script>
<script src="js/zepto/fx.js"></script>
<script src="js/zepto/touch.js"></script>
<script>
$(function ()
var $banner=$(".container");
var $width=$banner.width();
var $imageBox=$banner.find("ul:first-child");
var $pointBox=$banner.find("ul:last-child");
var $points=$pointBox.find("li");
var animationFuc=function ()
$imageBox.animate(transform:‘translateX(‘+(-index*$width)+‘px)‘,200,function ()
if(index>=9)
index=1;
$imageBox.css(transform:‘translateX(‘+(-index*$width)+‘px)‘);
else if(index<=0)
index=8;
$imageBox.css(transform:‘translateX(‘+(-index*$width)+‘px)‘);
$points.removeClass(‘active‘).eq(index-1).addClass(‘active‘);
)
var index=1;
var timer=setInterval(function ()
index++;
animationFuc();
,5000);
/*左手 下一张*/
$banner.on(‘swipeLeft‘,function ()
index ++;
animationFuc();
);
/*右滑的手势 上一张*/
$banner.on(‘swipeRight‘,function ()
index --;
animationFuc();
);
)
</script>
</body>
</html>
以上是关于zepto轮播图的主要内容，如果未能解决你的问题，请参考以下文章