Home > Developer > JavaScript
Effect: Mouse move in picture stop scrolling, mouse move out auto scroll
You can adjust the left or right direction scrolling
<style type= "Text/css" > *{margin:0;padding:0; }#div1{Overflow:Hidden;width:712px;Height:108px;margin:100px Auto;position:relative;background:Red; }#div1 ul{position:Absolute; Left:0;Top:0; }#div1 ul Li{float: Left;width:178px;Height:108px;List-style:None; }</style>
<Body> <ahref= "javascript:;">Go left.</a> <ahref= "javascript:;">Go right.</a> <DivID= "Div1"> <ul> <Li> <imgsrc= "img/seamless scrolling/1.jpg" /> </Li> <Li> <imgsrc= "img/seamless scrolling/2.jpg" /> </Li> <Li> <imgsrc= "img/seamless scrolling/3.jpg" /> </Li> <Li> <imgsrc= "img/seamless scrolling/4.jpg" /> </Li> </ul> </Div> </Body>
The above is a simple layout, the following is the main JavaScript code
<script type= "Text/javascript" >window.onload=function() { varOdiv = document.getElementById ("Div1"); varOul = Odiv.getelementsbytagname (' ul ') [0]; varALi = oul.getelementsbytagname (' li '); varSpeed = 2; Oul.innerhtml+=oul.innerhtml; OUl.style.width= ali[0].offsetwidth * ali.length + ' px '; functionMove () {if(Oul.offsetleft <-OUL.OFFSETWIDTH/2) {OUl.style.left= ' 0 '; } if(Oul.offsetleft > 0) {OUl.style.left=-oul.offsetwidth/2 + ' px '; } oUl.style.left= Oul.offsetleft + speed + ' px '; } varTimer = setinterval (move, 30); Odiv.onmouseover=function() {clearinterval (timer); }; Odiv.onmouseout=function() {Timer= SetInterval (Move, 30); }; document.getElementsByTagName (' A ') [0].onclick =function() { speed=-2; }; document.getElementsByTagName (' A ') [1].onclick =function() { speed= 2; }; } </script>
Simply tell the idea:
First set UL inside picture a total of 8 oul.innerhtml + + oul.innerhtml;
In calculating the width of the UL for Li's actual width *8
Then hide the extra content
Note: Oul.offsetleft must be negative
So don't miss the minus sign when you judge.
if (Oul.offsetleft <-OUL.OFFSETWIDTH/2) {
OUl.style.left = ' 0 ';
}
This paragraph indicates that the picture is rolling to half, quickly pull the picture back, because the program executes too fast, so it is almost invisible to achieve seamless scrolling
Finally, the variable speed is used to control the left and right direction scrolling.
Javascript Learning Notes Seamless scrolling
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
