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