Marquee and JS (JavaScript) Pictures Seamless scrolling method Set sponge

Below is I find on the internet a relatively simple marquee and JS to solve the picture of seamless scrolling method, including up, down, left and right four directions scrolling, below to introduce you;

Let's take a look at several properties of the objects used in the instance code:

1, InnerHTML: Set or get the HTML in the start and end tags of the object

2, ScrollHeight: Get the scroll height of the object.

3. ScrollLeft: Sets or gets the left distance between the left edge of the object and the current visible content in the window

4. ScrollTop: Sets or gets the distance between the top of the object and the top of the visible content in the window

5, ScrollWidth: Get the rolling width of the object

6. Offsetheight: Gets the height of the object relative to the layout or the parent coordinates specified by the parent coordinate offsetparent property

7. Offsetleft: Gets the left position of the object relative to the layout or the parent coordinates specified by the Offsetparent property

8. offsettop: Gets the calculated top position of the object relative to the layout or the parent coordinates specified by the offsettop property

9. Offsetwidth: Gets the width of the object relative to the layout or the parent coordinates specified by the parent coordinate offsetparent property

The first: the image of the seamless 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 larger 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 for Demo2 function Marquee () { if (tab2.offsettop-tab.scrolltop<=0)//when scrolling to the junction of Demo1 and Demo2 Tab.scrolltop-=tab1.offsetheight//demo jump to the top else{ tab.scrolltop++ } } var mymar=setinterval (marquee,speed); Tab.onmouseover=function () {clearinterval (MyMar)};//to clear the timer when the mouse moves up to stop the scroll Tab.onmouseout=function () {mymar=setinterval (marquee,speed)};//Reset timer when mouse is moved --> </script><!--scroll up end-->

The second type: The picture is scrolled down seamlessly

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 larger 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 for Demo2 Tab.scrolltop=tab.scrollheight function Marquee () { if (tab1.offsettop-tab.scrolltop>=0)//when scrolling to the junction of Demo1 and Demo2 Tab.scrolltop+=tab2.offsetheight//demo jump to the top else{ tab.scrolltop-- } } var mymar=setinterval (marquee,speed); Tab.onmouseover=function () {clearinterval (MyMar)};//to clear the timer when the mouse moves up to stop the scroll Tab.onmouseout=function () {mymar=setinterval (marquee,speed)};//Reset timer when mouse is moved --> </script><!--picture downward scrolling knot-->

Third: Picture left seamless scrolling

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 larger 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><!--picture left seamless scrolling end-->

Fourth: Picture to the right seamless scrolling

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 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 larger 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>

Above is the introduction of marquee combined with JS to the picture to the top and bottom of the four direction of seamless scrolling method, of course, there are other online methods, personally think this method is relatively simple, the code is not redundant, we can try.