<!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>
