<!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>
来源：https://www.cnblogs.com/cycczh/p/11331706.html