Seamless scrolling of marquee and js (javascript) images

This article focuses on the seamless scrolling of marquee and js (javascript) images. If you need it, you can try it for reference.

The following is a simple method I found on the Internet that combines marquee and js to solve seamless image scrolling, including Scrolling up, down, left, and right, the following is a brief introduction;

First, let's take a look at the attributes of objects used in the instance code:

1. innerHTML: set or obtain the HTML in the start and end tags of the object.

2. scrollHeight: gets the scroll height of an object.

3. scrollLeft: sets or obtains the distance between the left edge of the object and the leftmost end of the currently visible content in the window.

4. scrollTop: set or obtain the distance between the top of the object and the top of the visible content in the window.

5. scrollWidth: gets the scroll width of an object.

6. offsetHeight: gets the height of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute.

7. offsetLeft: obtains the left position of the object relative to the layout or the parent coordinate specified by the offsetParent attribute.

8. offsetTop: obtains the top position of an object relative to the layout or the parent coordinate specified by the offsetTop attribute.

9. offsetWidth: gets the width of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute.

First: Seamless image scrolling

The Code is as follows:

Copy code

<Style type = "text/css"> <! -- Style code # 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"> <Div id = "imagest"> <Div id = "images"> <a href = ""> </a> </div> <Div id = "imgtit"> <a href = "" title = ""> </a> </div> </Div> <Div id = "imagest"> <Div id = "images"> <a href = ""> </a> </div> <Div id = "imgtit"> <a href = "" title = ""> </a> </div> </Div> <Div id = "imagest"> <Div id = "images"> <a href = ""> </a> </div> <Div id = "imgtit"> <a href = "" title = ""> </a> </div> </Div> <Div id = "imagest"> <Div id = "images"> <a href = ""> </a> </div> <Div id = "imgtit"> <a href = "" title = ""> </a> </div> </Div> <Div id = "imagest"> <Div id = "images"> <a href = ""> </a> </div> <Div id = "imgtit"> <a href = "" title = ""> </a> </div> </Div> </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> <! -- Scroll up to end -->

Type 2: Seamless image scrolling down

The Code is as follows:

Copy code

<Style type = "text/css"> <! -- Style code # 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"> <Div id = "imagest"> <Div id = "images"> <a href = ""> </a> </div> <Div id = "imgtit"> <a href = "" title = ""> </a> </div> </Div> <Div id = "imagest"> <Div id = "images"> <a href = ""> </a> </div> <Div id = "imgtit"> <a href = "" title = ""> </a> </div> </Div> <Div id = "imagest"> <Div id = "images"> <a href = ""> </a> </div> <Div id = "imgtit"> <a href = "" title = ""> </a> </div> </Div> <Div id = "imagest"> <Div id = "images"> <a href = ""> </a> </div> <Div id = "imgtit"> <a href = "" title = ""> </a> </div> </Div> <Div id = "imagest"> <Div id = "images"> <a href = ""> </a> </div> <Div id = "imgtit"> <a href = "" title = ""> </a> </div> </Div> </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> <! -- Scroll down the image -->

Third: Seamless image scrolling to the left

The Code is as follows:

Copy code

<Style type = "text/css"> <! -- Style code # 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"> <Div id = "imagest"> <Div id = "images"> <a href = ""> </a> </div> <Div id = "imgtit"> <a href = "" title = ""> </a> </div> </Div> <Div id = "imagest"> <Div id = "images"> <a href = ""> </a> </div> <Div id = "imgtit"> <a href = "" title = ""> </a> </div> </Div> <Div id = "imagest"> <Div id = "images"> <a href = ""> </a> </div> <Div id = "imgtit"> <a href = "" title = ""> </a> </div> </Div> <Div id = "imagest"> <Div id = "images"> <a href = ""> </a> </div> <Div id = "imgtit"> <a href = "" title = ""> </a> </div> </Div> <Div id = "imagest"> <Div id = "images"> <a href = ""> </a> </div> <Div id = "imgtit"> <a href = "" title = ""> </a> </div> </Div> </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> <! -- The image ends seamlessly on the left -->

Type 4: Seamless image scrolling to the right

The Code is as follows:	Copy code
<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

The Code is as follows:

Copy code

<Div id = "demo"> <Div id = "indemo"> <Div id = "demo1"> <Div id = "imagest"> <Div id = "images"> <a href = ""> </a> </div> <Div id = "imgtit"> <a href = "" title = ""> </a> </div> </Div> <Div id = "imagest"> <Div id = "images"> <a href = ""> </a> </div> <Div id = "imgtit"> <a href = "" title = ""> </a> </div> </Div> <Div id = "imagest"> <Div id = "images"> <a href = ""> </a> </div> <Div id = "imgtit"> <a href = "" title = ""> </a> </div> </Div> <Div id = "imagest"> <Div id = "images"> <a href = ""> </a> </div> <Div id = "imgtit"> <a href = "" title = ""> </a> </div> </Div> <Div id = "imagest"> <Div id = "images"> <a href = ""> </a> </div> <Div id = "imgtit"> <a href = "" title = ""> </a> </div> </Div> </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>

The above section describes how to use marquee and js to seamlessly scroll up and down the image in four directions. Of course, there are other methods on the Internet. I personally think this method is simple and the code is not redundant, you can try it.