Simple Example for JS to implement continuous and continuous image scrolling, and js Continuous Rolling instance

Simple Example for JS to implement continuous and continuous image scrolling, and js Continuous Rolling instance

Js replaces marquee to achieve seamless image scrolling

You may have encountered this problem. When marquee is rolling an image, it will jump back to the starting point directly when it is rolling to the end point, instead of seamless scrolling like text, the following describes how to implement seamless image scrolling through js.

First, let's take a look at the following attributes:

InnerHTML: sets or retrieves HTML in the object's start and end tags.

ScrollHeight: gets the scroll height of an object.

ScrollLeft: sets or obtains the distance between the left-side border of the object and the leftmost end of the currently visible content in the window.

ScrollTop: sets or obtains the distance between the top of the object and the top of the visible content in the window.

ScrollWidth: gets the scroll width of an object.

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

OffsetLeft: obtains 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: gets the width of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent attribute.

-----------------------------------------------------------------------

Seamless image scroll up

<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> <script> <! -- Var speed = 10; // The greater the number, the slower the speed. var tab = document. getElementByIdx_x ("demo"); var tab1 = document. getElementByIdx_x ("demo1"); var tab2 = document. getElementByIdx_x ("demo2"); tab2.innerHTML = tab1.innerHTML; // clone demo1 as demo2function Marquee () {if (tab2.offsetTop-tab. scrollTop <= 0) // tab when it is scrolled to the junction of demo1 and demo2. scrollTop-= tab1.offsetHeight // The demo jumps to the top else {tab. scrollTop ++} var MyMar = setInterval (Marquee, speed); tab. onmouseover = function () {clearInterval (MyMar)}; // when you move the cursor up, clear the tab for the timer to stop rolling. onmouseout = function () {MyMar = setInterval (Marquee, speed)}; // reset the timer when the mouse is removed --> </script>

Seamless image scrolling down

<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> <script> <! -- Var speed = 10; // The greater the number, the slower the speed. var tab = document. getElementByIdx_x ("demo"); var tab1 = document. getElementByIdx_x ("demo1"); var tab2 = document. getElementByIdx_x ("demo2"); tab2.innerHTML = tab1.innerHTML; // clone demo1 as demo2tab. scrollTop = tab. scrollHeightfunction Marquee () {if (tab1.offsetTop-tab. scrollTop> = 0) // click the tab when you scroll to the junction of demo1 and demo2. scrollTop + = tab2.offsetHeight // The demo jumps to the top else {tab. scrollTop --} var MyMar = setInterval (Marquee, speed); tab. onmouseover = function () {clearInterval (MyMar)}; // when you move the cursor up, clear the tab for the timer to stop rolling. onmouseout = function () {MyMar = setInterval (Marquee, speed)}; // reset the timer when the mouse is removed --> </script>

Seamless image scrolling to the left

<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> <script> <! -- Var speed = 10; // The greater the number, the slower the speed. var tab = document. getElementByIdx_x ("demo"); var tab1 = document. getElementByIdx_x ("demo1"); var tab2 = document. getElementByIdx_x ("demo2"); tab2.innerHTML = tab1.innerHTML; function Marquee () {if (tab2.offsetWidth-tab. scrollLeft <= 0) tab. scrollLeft-= tab1.offsetWidthelse {tab. scrollLeft ++ ;}}var MyMar = setInterval (Marquee, speed); tab. onmouseover = function () {clearInterval (MyMar)}; tab. onmouseout = function () {MyMar = setInterval (Marquee, speed)}; --> </script>

Seamless scrolling to 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> <script> <! -- Var speed = 10; // The greater the number, the slower the speed. var tab = document. getElementByIdx_x ("demo"); var tab1 = document. getElementByIdx_x ("demo1"); var tab2 = document. getElementByIdx_x ("demo2"); tab2.innerHTML = tab1.innerHTML; function Marquee () {if (tab. scrollLeft <= 0) tab. scrollLeft + = tab2.offsetWidthelse {tab. scrollLeft --;} var MyMar = setInterval (Marquee, speed); tab. onmouseover = function () {clearInterval (MyMar)}; tab. onmouseout = function () {MyMar = setInterval (Marquee, speed)}; --> </script>

Finally, if someone wants a page to have two scroll image sets, one to the left and the other to the right, the following can be used. I added all js I and css.

Scroll to the right

<Div id = "demoi"> <div id = "indemoi"> <div id = "demoi1"> <a href = "#">  </a> <a href = "#">  </a> <a href = "#">  </a> <a href = "#">  </a> <Href = "#">  </a> </div> <div id = "demoi2"> </div> </div> <script> <! -- Var speedi = 10; // The greater the number, the slower the speed. var tabi = document. getElementByIdx_x ("demoi"); var tabi1 = document. getElementByIdx_x ("demoi1"); var tabi2 = document. getElementByIdx_x ("demoi2"); tabi2.innerHTML = tabi1.innerHTML; function Marqueei () {if (tabi. scrollLeft <= 0) tabi. scrollLeft + = tabi2.offsetWidthelse {tabi. scrollLeft --;} var MyMari = setInterval (Marqueei, speedi); tabi. onmouseover = function () {clearInterval (MyMari)}; tabi. onmouseout = function () {MyMari = setInterval (Marqueei, speedi)}; --> </script>

The simple example of the above JS Implementation of Continuous Image scrolling is all the content shared by xiaobian. I hope to give you a reference, and I hope you can provide more support for the customer's house.