<!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>
window.onload=function () {
banner();
}
function banner() {
var banner=document.querySelector(".container");
var width=banner.offsetWidth;
var imageBox=banner.querySelector("ul:first-child");
var pointBox=banner.querySelector("ul:last-child");
var points=pointBox.querySelectorAll("li");
var setTranslateX=function (translateX) {
imageBox.style.transform='translateX('+translateX+'px)';
imageBox.style.webkitTtranform='translateX('+translateX+'px)';
}
var removeTransition=function () {
imageBox.style.transition="none";
imageBox.style.webkitTransition = 'none';
}
var addTransition=function () {
imageBox.style.transition="all 0.2s";
imageBox.style.webkitTransition = 'all 0.2s';
}
var index=1;
var timer=setInterval(function () {
index++;
imageBox.style.transition="all 0.2s";
imageBox.style.webkitTransition = 'all 0.2s';
imageBox.style.transform='translateX('+(-index*width)+'px)';
imageBox.style.webkitTtranform='translateX('+(-index*width)+'px)';
},1000);
imageBox.addEventListener("transitionend",function () {
if(index>=9){
index=1;
imageBox.style.transition="none";
imageBox.style.webkitTransition = 'none';
imageBox.style.transform='translateX('+(-index*width)+'px)';
imageBox.style.webkitTtranform='translateX('+(-index*width)+'px)';
}else if(index<=0){
index=8;
imageBox.style.transition="none";
imageBox.style.webkitTransition = 'none';
imageBox.style.transform='translateX('+(-index*width)+'px)';
imageBox.style.webkitTtranform='translateX('+(-index*width)+'px)';
}
setPoint();
})
var setPoint=function () {
for (var i=0;i<points.length;i++){
var obj=points[i];
obj.classList.remove("active");
}
points[index-1].classList.add("active");
}
var startX=0;
var distanceX=0;
var isMove=false;
imageBox.addEventListener("touchstart",function (e) {
clearInterval(timer);
startX=e.touches[0].clientX;
})
imageBox.addEventListener("touchmove",function (e) {
var moveX=e.touches[0].clientX;
distanceX=moveX-startX;
var translateX=-index*width+distanceX;
removeTransition();
setTranslateX(translateX);
isMove = true;
})
imageBox.addEventListener("touchend",function () {
if(isMove){
if(Math.abs(distanceX)<width/3){
addTransition();
setTranslateX(-index*width);
}else{
if(distanceX>0){
index--;
}else{
index++;
}
addTransition();
setTranslateX(-index*width);
}
}
/*最好做一次参数的重置*/
startX = 0;
distanceX = 0;
isMove = false;
/*加上定时器*/
clearInterval(timer);
timer=setInterval(function () {
index++;
addTransition();
setTranslateX(-index * width);
},1000)
})
}
</script>
</body>
</html>
