<! DOCTYPE html>"en">"UTF-8"> <meta name="Viewport"Content="Width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/> <meta name="Apple-touch-fullscreen"Content="Yes"/> <meta name="apple-mobile-web-app-capable"Content="Yes"/> <meta name="Apple-mobile-web-app-status-bar-style"Content="Black"/> <script src="Js/jquery-1.8.1.min.js"></script> <title>Document</title> <style> *{margin:0px; padding:0px;} body,html{Width: -%; Height -%; } div#rect{Width: -%; Height -%;} #scrollimg {position:relative; width:200px; height:110px; Margin:0Auto; Overflow:hidden; } #scrollimg ul{Position:absolute; Top:0; Left:0; width:800px; } #scrollimg ul li{float: Left; width:200px; height:110px; List-Style:none; } #scrollimg ul Li img{display:block; width:200px; height:110px; } #scrollimg ul Li:nth-of-type (1) img{background: #fbb03b; } #scrollimg ul Li:nth-of-type (2) img{background: #fc5252; } #scrollimg ul Li:nth-of-type (3) img{background: #b266f2; } #scrollimg ul Li:nth-of-type (4) img{background: #d1c0a5; } #scrollimg ol{Position:absolute; bottom:10px; right:10px; List-Style:none; } #scrollimg ol li{float: Left; width:10px; height:10px; Margin-right:5px; Border-radius: -%; Background:rgba (255,255,255,0.5); } #scrollimg ol. active{background: #E4393C; } </style>"rect"> <div id="Dire"></div> </div> <div id="scrollimg"> <ul> <li><a href="javascript:;">""alt=""></a></li> <li><a href="javascript:;">""alt=""></a></li> <li><a href="javascript:;">""alt=""></a></li> <li><a href="javascript:;">""alt=""></a></li> </ul> </div> <script>(function () {varLswipermaker =function (o) {varthat = This; This. config =o; This. Control =false; This. Spos = {}; This. MPos = {}; This. Dire; //this.config.bind.addEventListener (' Touchstart ', function () {return That.start ();}, False); //This is not correct, the event object is only valid in the process of occurrence; This. Config.bind.addEventListener ('Touchstart', function (e) {returnThat.start (e); } ,false); This. Config.bind.addEventListener ('Touchmove', function (e) {returnThat.move (e); } ,false); This. Config.bind.addEventListener ('Touchend', function (e) {returnThat.end (e); } ,false); } LSwiperMaker.prototype.start=function (e) {varPoint = E.touches? e.touches[0]: E; This. spos.x =Point.screenx; This. Spos.y =Point.screeny; } LSwiperMaker.prototype.move=function (e) {varPoint = E.touches? e.touches[0]: E; This. Control =true; This. mpos.x =Point.screenx; This. Mpos.y =Point.screeny; } LSwiperMaker.prototype.end=function (e) { This. Config.dire_h && (! This. Control? This. Dire =NULL: This. mpos.x > This. spos.x? This. Dire ='R': This. Dire ='L') This. config.dire_h | | (! This. Control? This. Dire =NULL: This. mpos.y > This. spos.y? This. Dire ='D': This. Dire ='U') This. Control =false; This. CONFIG.BACKFN ( This); varScrollimg = This. Config.bind; varwidth = $ (scrollimg). Find ('Li'). width (); varLeft = $ (scrollimg). Find ('ul'). CSS (' Left'); if( This. Dire = ='L') { left= parseint (left)- $+'px' ; if(left = ='-800px') left=0; $ (scrollimg). Find ('ul'). CSS (' Left', left)}Else{ Left= parseint (left) + $+'px' ; if(left = ='200px') left=- -; $ (scrollimg). Find ('ul'). CSS (' Left', left)} } window. Lswipermaker=Lswipermaker; Document.addeventlistener ('Touchmove', function (e) {E.preventdefault ();},false);//Prohibit touchmove conflicts }()) varA =NewLswipermaker ({bind:document.getElementById ("scrollimg"),//the bound DOM objectDire_h:true,//true judgment around and false judging up and downBackfn:function (o) {//Callback Eventsdocument.getElementById ("Dire"). InnerHTML ="to"+ O.dire +"slip"; } }) </script></body>Touch-Screen Carousel