<! DOCTYPE html>body {margin:0; padding:0; Background: #333; Overflow:hidden;} Li, ul {list-Style:none; Margin:0; padding:0; Height:100%; Overflow:hidden;}/*make the picture centered Webkit-box*/Li {position:absolute; Display:-webkit-box; -webkit-box-Pack:center; -webkit-box-Align:center; -webkit-backface-Visibility:hidden;} Li img {max-width:100%; Max-height:100%;}/*Hide content outside the canvas*/#canvas {height:100%; Width:100%; Overflow:hidden; }</style><body><div id= "Canvas" > <ul style= "margin-left:0px" > <li ></li> <li ></li> <li ></li> <li ></li> </ul></div></body>< /html><script src= "Jquery-1.11.1.min.js" ></script><script type= "Text/javascript" >varwarw=$ (window). width ();//width of the screen varwarh=$ (window). Height ();//the height of the screen varoui=$ ("#canvas ul") varlilen=$ ("#canvas ul Li"). length; varWarnum=warw/warh; //The ratio of the width to the height of the screenvaroli=$ ("#canvas ul Li"); varSTARTIME,OLIX,SEFX,MOLIX,ENDTIME,NUMML; var$indexLi = ""; varNumml= "; Oui.width (WARW). Height (Warh); Oli.width (WARW);/*initial picture on one screen adaptive display*/Oli.each (function(){ varImgnum= $ ( This). FIND ("img"). Width ()/$ (this). FIND ("img"). Height ();if(warnum>imgnum) { $( This). FIND ("img"). Width ($ ( This). FIND ("img"). Width ())}Else{ $( This). FIND ("img"). Height ($ ( This). FIND ("img"). Height ())}});/*initial picture horizontal arrangement*/ for(vari=0;i<lilen; i++){ //svar $this =$ (This). index (); varnumx=i*warw+ "px"; Oli.eq (i). css ({"Transform": "TranslateX (" +numx+ ")" }) } /*when the mouse starts*/ functionStarthandler (evt) {evt.preventdefault (); Startime=NewDate () * 1; StartX=evt.touches[0].pagex; Console.log (NUMML+ "Star"); Oui.css ("Margin-left", "' +numml+ ' px") }/*when the mouse is sliding*/ functionMovehandler (evt) {evt.preventdefault (); Molix=evt.targettouches[0].clientx-StartX; var$indexLi =$ ( This). index ();//Current index value var$index =$indexLi; Oui.css ({"MarginLeft":(molix+ (-$index *warw)) + "px", }) }/*when the mouse leaves*/var$indexLi =1;functionEndhandler (evt) {evt.preventdefault (); varEndTime =NewDate () * 1; varcon = WARW/6; var$indexLi = $ ( This). index (); NUMML= 0 + $indexLi * WARW;//record the amount of offset if(Endtime-startime > 500) {//perform a sliding function by the size of time if(Molix <-con) { if($indexLi = = liLen-1) {//the last sheet does not perform a sliding functionGoindex ($indexLi); return false;//prevent jumping out of the browser}Else{$indexLi++; Goindex ($indexLi); } } Else if(Molix >con) { if($indexLi = = 0) {Goindex (0); return false; } Else{$indexLi--; Goindex ($indexLi); } } } Else { //Quick Trigger Swipe if(Molix <-20) { if($indexLi = = LiLen-1) {goindex ($indexLi); return false; } Else{$indexLi++; Goindex ($indexLi); } } Else if(Molix > 20) { if($indexLi = = 0) {Goindex (0); return false; } Else{$indexLi--; Goindex ($indexLi); } } }} /*functions performed when the mouse is left*/ functionGoindex ($indexLi) {oui.animate ({"MarginLeft":(-$indexLi *warw) + "px", },260) } /*function Bindings*/ for(vari=0; i<lilen;i++) {Oli[i].addeventlistener (' Touchstart ', starthandler);//displacement of the current fingerOli[i].addeventlistener (' Touchmove ', movehandler);//displacement of the current fingerOli[i].addeventlistener (' Touchend ', endhandler);//displacement of the current finger }</script>
SOURCE download. Please go to the file download inside the Demo1.rar
Cell Phone Carousel event, JQ
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
