[JS] seamless and continuous image scrolling

[JS] seamless and continuous image scrolling)
Author: City Mu Ren Date:
Font size: medium or large
How can we achieve continuous (seamless continuous) scrolling between the first and last images?

Solution: A container demo that sets the width and hides content that exceeds its width. demo1 and demo2 are included, demo1 is the scrolling content, and demo2 is the direct clone copy of demo1, by constantly changing the scrolltop or scrollleft of demo1, you can directly jump back to the initial position when you scroll to the junction of demo1 and demo2. Because demo1 is the same as demo2, you cannot tell the beat moment, this achieves seamless rolling.
Seamless left-side continuous scrolling of imagesCode:

Program Code
<Div id = "Demo" style = "overflow: hidden; width: 100%; color: # ffffff;">
<Table cellpadding = "0" cellspacing = "0" border = "0">
<Tr> <TD id = "demo1" valign = "TOP" align = "center">
<Table cellpadding = "2" cellspacing = "0" border = "0">
<Tr align = "center">
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</Tr>
</Table>
</TD>
<TD id = "demo2" valign = "TOP"> </TD>
</Tr>
</Table>
</Div>
<SCRIPT>
VaR speed = 2 // The greater the speed, the slower the speed.
Demo2.innerhtml = demo1.innerhtml
Function marquee (){
If (demo2.offsetwidth-demo. scrollleft <= 0)
Demo. scrollleft-= demo1.offsetwidth
Else {
Demo. scrollleft ++
}
}
VaR mymar = setinterval (marquee, speed)
Demo. onmouseover = function () {clearinterval (mymar )}
Demo. onmouseout = function () {mymar = setinterval (marquee, speed )}
</SCRIPT>

 

Code for seamless upward and continuous scrolling of images:

Program code
<Table width = "100%" border = 0>
<Tbody>
<Tr>
<TD align = middle>
<Div align = center> </div>
<Div id = demo style = "overflow: hidden; width: 160px; Height: 150px">
<Div id = demo1>
<Br/> <a href = "#" target = _ blank> </a>
<Br/> <a href = "#" target = _ blank> </a>
<Br/> <a href = "#" target = _ blank> </a>
<Br/> <a href = "#" target = _ blank> </a>
<Br/> <a href = "#" target = _ blank> </a> </div>
<Div id = demo2> </div>
<SCRIPT>
VaR speed = 2
Demo2.innerhtml = demo1.innerhtml
Function marquee (){
If (demo2.offsettop-demo. scrolltop <= 0)
Demo. scrolltop-= demo1.offsetheight
Else {
Demo. scrolltop ++
}
}
VaR mymar = setinterval (marquee, speed)
Demo. onmouseover = function () {clearinterval (mymar )}
Demo. onmouseout = function () {mymar = setinterval (marquee, speed )}
</SCRIPT>
</TD>
</Tr>
</Tbody>
</Table>