Seamless image scrolling code (left/down/UP)

We must have noticed that <marquee> does not scroll cyclically, so there are many alternative scripts, or iframe or JS output <marquee>. No matter how it is done, it is a little troublesome. The following is a simple implementation concept: A container demo that sets the width and hides content beyond its width. demo1 and demo2 are included in the demo, and demo1 is the scrolling content, demo2 is a direct clone of demo1. By constantly changing the scrollTop or scrollLeft of demo1 to scroll, the original position is directly jumped back when rolling to the junction of demo1 and demo2 because demo1 is the same as demo2, therefore, we can't tell the beat moment to achieve the goal of "seamless" rolling.

Some modifications have been made based on the original author, mainly in the style above, replace the table with a label. And standardize JavaScript to run in all browsers.

First, let's take a look at several attributes of the object: innerHTML: set or obtain the HTML scrollHeight located in the start and end labels of the object: get the scroll height of the object.

ScrollLeft: sets or obtains the scrollTop distance between the left edge of the object and the leftmost end of the currently visible content in the window: set or get the scrollWidth between the top of the object and the top of the visible content in the window: get the scroll width of the object offsetHeight: obtain the height of an object relative to the layout or the height of the parent coordinate specified by the parent coordinate offsetParent attribute offsetLeft: Obtain the left position of the object relative to the layout or the parent coordinate specified by the offsetParent attribute offsetTop: obtains the top position of an object relative to the layout or the parent coordinate specified by the offsetTop attribute. offsetWidth: obtains the width of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute.
Copy codeThe Code is as follows:
Seamless Scrolling on Images
<Style type = "text/css">
<! --
# Demo {
Background: # FFF;
Overflow: hidden;
Border: 1px dashed # CCC;
Height: 100px;
Text-align: center;
Float: left;
}
# Demo img {
Border: 3px solid # F2F2F2;
Display: block;
}
-->
</Style>
Scroll up
<Div id = "demo">
<Div id = "demo1">
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
</Div>
<Div id = "demo2"> </div>
</Div>
<Script>
<! --
Var speed = 10; // The greater the number, the slower the speed.
Var tab = document. getElementById ("demo ");
Var tab1 = document. getElementById ("demo1 ");
Var tab2 = document. getElementById ("demo2 ");
Tab2.innerHTML = tab1.innerHTML; // clone demo1 to demo2
Function Marquee (){
If (tab2.offsetTop-tab. scrollTop <= 0) // when you scroll to the junction of demo1 and demo2
Tab. scrollTop-= tab1.offsetHeight // The demo jumps to the top of the page.
Else {
Tab. scrollTop ++
}
}
Var MyMar = setInterval (Marquee, speed );
Tab. onmouseover = function () {clearInterval (MyMar)}; // clear the timer when you move the cursor up to stop scrolling.
Tab. onmouseout = function () {MyMar = setInterval (Marquee, speed)}; // reset the timer when you move the mouse away
-->
</Script>
Seamless scrolling under images
<Style type = "text/css">
<! --
# Demo {
Background: # FFF;
Overflow: hidden;
Border: 1px dashed # CCC;
Height: 100px;
Text-align: center;
Float: left;
}
# Demo img {
Border: 3px solid # F2F2F2;
Display: block;
}
-->
</Style>
Scroll down
<Div id = "demo">
<Div id = "demo1">
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
</Div>
<Div id = "demo2"> </div>
</Div>
<Script>
<! --
Var speed = 10; // The greater the number, the slower the speed.
Var tab = document. getElementById ("demo ");
Var tab1 = document. getElementById ("demo1 ");
Var tab2 = document. getElementById ("demo2 ");
Tab2.innerHTML = tab1.innerHTML; // clone demo1 to demo2
Tab. scrollTop = tab. scrollHeight
Function Marquee (){
If (tab1.offsetTop-tab. scrollTop> = 0) // when you scroll to the junction of demo1 and demo2
Tab. scrollTop + = tab2.offsetHeight // The demo jumps to the top of the page.
Else {
Tab. scrollTop --
}
}
Var MyMar = setInterval (Marquee, speed );
Tab. onmouseover = function () {clearInterval (MyMar)}; // clear the timer when you move the cursor up to stop scrolling.
Tab. onmouseout = function () {MyMar = setInterval (Marquee, speed)}; // reset the timer when you move the mouse away
-->
</Script>
Seamless left scrolling
<Style type = "text/css">
<! --
# Demo {
Background: # FFF;
Overflow: hidden;
Border: 1px dashed # CCC;
Width: 500px;
}
# Demo img {
Border: 3px solid # F2F2F2;
}
# Indemo {
Float: left;
Width: 800%;
}
# Demo1 {
Float: left;
}
# Demo2 {
Float: left;
}
-->
</Style>
Scroll left
<Div id = "demo">
<Div id = "indemo">
<Div id = "demo1">
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
</Div>
<Div id = "demo2"> </div>
</Div>
</Div>
<Script>
<! --
Var speed = 10; // The greater the number, the slower the speed.
Var tab = document. getElementById ("demo ");
Var tab1 = document. getElementById ("demo1 ");
Var tab2 = document. getElementById ("demo2 ");
Tab2.innerHTML = tab1.innerHTML;
Function Marquee (){
If (tab2.offsetWidth-tab. scrollLeft <= 0)
Tab. scrollLeft-= tab1.offsetWidth
Else {
Tab. scrollLeft ++;
}
}
Var MyMar = setInterval (Marquee, speed );
Tab. onmouseover = function () {clearInterval (MyMar )};
Tab. onmouseout = function () {MyMar = setInterval (Marquee, speed )};
-->
</Script>
Seamless Scrolling on the right
<Style type = "text/css">
<! --
# Demo {
Background: # FFF;
Overflow: hidden;
Border: 1px dashed # CCC;
Width: 500px;
}
# Demo img {
Border: 3px solid # F2F2F2;
}
# Indemo {
Float: left;
Width: 800%;
}
# Demo1 {
Float: left;
}
# Demo2 {
Float: left;
}
-->
</Style>
Scroll to the right
<Div id = "demo">
<Div id = "indemo">
<Div id = "demo1">
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
</Div>
<Div id = "demo2"> </div>
</Div>
</Div>
<Script>
<! --
Var speed = 10; // The greater the number, the slower the speed.
Var tab = document. getElementById ("demo ");
Var tab1 = document. getElementById ("demo1 ");
Var tab2 = document. getElementById ("demo2 ");
Tab2.innerHTML = tab1.innerHTML;
Function Marquee (){
If (tab. scrollLeft <= 0)
Tab. scrollLeft + = tab2.offsetWidth
Else {
Tab. scrollLeft --
}
}
Var MyMar = setInterval (Marquee, speed );
Tab. onmouseover = function () {clearInterval (MyMar )};
Tab. onmouseout = function () {MyMar = setInterval (Marquee, speed )};
-->
</Script>