Home > Developer > JavaScript
In contrast, seamless stitching avoids the gap when switching, making the user experience even better!
Seamless scrolling principle:
Make a twin, the content is consistent with the main content, the style is consistent, if the horizontal arrangement is side-by, when the switch, you can make up for the main blank place, other in accordance with the normal cycle operation can be.
Source:
<!DOCTYPE HTML><HTMLLang= "Zn-ch"><Head> <MetaCharSet= "UTF-8"> <title>Demo</title> <style>. Slide-box{margin:0 Auto;width:300px;Height:100px;Overflow:Hidden}. Slide-box-inner{width:600px;Height:100px}. Slide-content,.slide-copy{float: Left;Height:100px}. Slide-content a,.slide-copy a{Display:Block;width:100px;Height:100px;text-align:Center;Line-height:100px;Color:#fff;text-decoration:None;float: Left}. Box1{background:#4A88C6}. Box2{background:#EC118E}. Box3{background:#1AA3A9} </style></Head><Body> <Divclass= "Slide-box"ID= "Slidebox"> <Divclass= "Slide-box-inner"> <Divclass= "Slide-content"ID= "Slidecontent"> <ahref="#"class= "Box1">No1</a><ahref="#"class= "Box2">No2</a><ahref="#"class= "Box3">No3</a> </Div> <!--twin brothers - <Divclass= "Slide-copy"ID= "Slidecopy"> </Div> </Div> </Div> <Scripttype= "Text/javascript"language= "JavaScript"> //Large Floor varSlidebox=document.getElementById ("Slidebox"); //Content Layer varslidecontent=document.getElementById ("slidecontent"); //splicing Layer varslidecopy=document.getElementById ("slidecopy"); //Cycle Time interval var Speed= Ten; //Copy Contentslidecopy.innerhtml=slidecontent.innerhtml; //* Seamless switch function, scroll value >= visual width, return to 0, otherwise numeric increment functionseamlessslide () {varSeewidth=Slidecontent.offsetwidth; if(Slidebox.scrollleft>=seewidth) {Slidebox.scrollleft= 0; } Else{slidebox.scrollleft++; } } //loop Execution slide every 10 milliseconds varRunslide=setinterval (seamlessslide, speed); //The mouse moves to the large layer, the loop terminatesSlidebox.onmouseover= function() {clearinterval (runslide); } ////When the mouse is moved, continue loopingSlidebox.onmouseout= function() {setTimeout (function() {runslide=setinterval (seamlessslide, speed); }, -); } </Script></Body></HTML>
JavaScript Seamless scrolling principle
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
