1. Cyclic sliding effect (see effect first)
2, how to layout (the following is my idea)
<styletype= "Text/css"> * {margin:0;padding:0; }#scroll Div{Border:1px solid Red;float: Left;background:#abcdef;text-align:Center; } </style></Head><Body> <DivID= "Container"style= "position:relative; width:100%; height:90%; overflow:hidden;"> <DivID= "Scroll"style= "position:absolute; height:100%;"> <Div>5</Div> <Div>1</Div> <Div>2</Div> <Div>3</Div> <Div>4</Div> <Div>5</Div> <Div>1</Div> </Div> </Div></Body>
3, the touch screen mobile algorithm
The specific code is as follows:
varScroll = document.getElementById (' scroll ')); varcontainer = document.getElementById ("Container") varClientatt ={width:document.documentElement.clientWidth, Height:document.documentElem Ent.clientheight}; //Set SizeContainer.style.width = clientatt.width + ' px '; Container.style.height= clientatt.height + ' px '; Scroll.style.width= clientatt.width * 7 + ' px '; Scroll.style.left=-clientatt.width + ' px '; $("#scroll div"). css ({width:clientatt.width-2+ ' px ', height:clientatt.height-2+ ' px ', ' line-height '): clientatt.height-2+ ' px '}); varInitleft = 0;//initial distance of object varDisstart = 0;//Finger touch screen distanceScroll.addeventlistener ("Touchstart",function(EV) {varoevent = EV | |event; Oevent.preventdefault (); vartouch = oevent.touches[0];//Get finger touch screen informationDisstart = Touch.clientx;//touch screen start of finger xInitleft = This. offsetleft;//the beginning of the object left},false) Scroll.addeventlistener ("Touchmove",function(EV) {varoevent = EV | |event; Oevent.preventdefault (); if(OEvent.targetTouches.length = = 1) { vartouch = oevent.touches[0];//Get finger touch screen information varDisend = Touch.clientx;//finger touch screen x //Current object Movement distance = finger touch screen Position-finger touch screen start position + object start position varMovedis = Disend-disstart +Initleft; //Sliding boundary handling if(Math.Abs (Movedis) > Clientatt.width * 6) {Movedis=-clientatt.width * 6; } if(Movedis > 0) {Movedis= 0; } This. Style.left = Movedis + ' px '; } }, false);
4. Special handling of finger leaving screen
varCurrindex = 1;//first oneScroll.addeventlistener (' Touchend ',function(EV) {varAbsleft = Math.Abs ( This. offsetleft); if(Absleft! =Math.Abs (Initleft)) { if(Absleft >Math.Abs (Initleft)) {Currindex++; } Else{Currindex--; }} currindex= currindex > 6? 6: Currindex; $( This). Stop (true). Animate ({"Left":-currindex * clientatt.width + ' px '}, 300,function () { //Cycle: End-to-end processing /*5th Element If you continue to slide to the left, the 1th slide to 1th, how to meet the 2nd element???? To deal with this problem, when the finger is released, the position of the current object is changed to the distance of the 1th element, and the 1th element continues to slide to the right .*/ if(Currindex = = 6) { $( This). CSS ("left",-clientatt.width + ' px '); Currindex= 1; } Else if(Currindex = = 0) { $( This). CSS ("left",-5 * clientatt.width + ' px ')); Currindex= 5; } }); });
Mobile-List Loop slide
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
