JavaScript timer to achieve seamless scrolling of pictures

This article shares the specific code of JavaScript to achieve seamless scrolling of pictures for your reference. The specific content is as follows

text:

setInterval starts an interval timer
clearTimeout closes the timer
offsetWidth Get width
offsetLeft Get the left offset

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Seamless Mobility</title>
    <style>
        *{margin: 0; padding: 0;}
        #div1{width:520px; height:170px; margin:20px auto; position: relative; /* !!! The position of div1 is relative*/
                background: pink; overflow: hidden} /* !!! overflow: hidden */
        #div1 ul{position: absolute; left:0; top:0;} /* !!! ul's position: absolute, controls the value of left*/
        #div1 ul li{float:left; width:130px; height:170px; list-style: none}
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            var oUl=oDiv.getElementsByTagName('ul')[0];
            var aLi=oUl.getElementsByTagName('li');
            var speed = 2;

            oUl.innerHTML+=oUl.innerHTML; // Equivalent to 4*2 images moving oUl.style.width=aLi[0].offsetWidth * aLi.length + 'px'; // !!!!!! offsetWidth

            function Move() {
                if(oUl.offsetLeft <- oUl.offsetWidth/2){ // Move halfway to the left and then come back oUl.style.left='0';
                }
                if(oUl.offsetLeft>0){ // // Move halfway to the right and then come back oUl.style.left = - oUl.offsetWidth/2 +'px';
                }
                oUl.style.left=oUl.offsetLeft + speed + 'px'; // !!!!!!!! offsetLeft
            }

            var Timer1 = setInterval(Move, 30); // setInterval turns on the interval timer oDiv.onmouseover = function () {
                clearTimeout(Timer1);
            };
            oDiv.onmouseout=function () {
                Timer1=setInterval(Move, 30);
            };

            document.getElementsByTagName('a')[0].onclick=function () {
                speed=-2; // speed to the left};
            document.getElementsByTagName('a')[1].onclick=function () {
                speed=2; // speed to the right};
        };
    </script>

</head>
<body>
<a href="javascript:;" >Move left</a>
<a href="javascript:;" >Move right</a>
    <div id="div1">
        <ul>
            <li><img src="img/aa.jpg"/></li>
            <li><img src="img/bb.jpg"/></li>
            <li><img src="img/cc.jpg"/></li>
            <li><img src="img/dd.jpg"/></li>
        </ul>
    </div>
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: