无缝滚动 - 起风了

功能：
鼠标移入暂停滚动；
鼠标移出恢复滚动；
控制向左向右滚动；

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>无缝滚动</title>        <style>            #div1{                width: 400px;                height: 100px;                background: red;                float: left;                position: relative;                margin: 200px;                overflow: hidden;            }            ul{                float: left;                list-style: none;                margin: 0;                padding: 0;                position: absolute;            }            li{                float: left;                display: inline;                list-style: none;            }            img{                margin: 0;                width: 100px;                height: 100px;            }        </style>        <script>            window.onload = function(){                var oUl1 = document.getElementsByTagName('ul')[0];                var timer;                var speed = -2;                oUl1.innerHTML += oUl1.innerHTML;                oUl1.style.width = '800px';                function move(){                    if(oUl1.offsetLeft < -oUl1.offsetWidth/2){                        oUl1.style.left = '0px';                    }                    if(oUl1.offsetLeft > 0){                        oUl1.style.left = -oUl1.offsetWidth/2 + 'px';                    }                    oUl1.style.left = oUl1.offsetLeft + speed + 'px';                }                timer = setInterval(move,30);                oUl1.onmouseover = function(){                    clearInterval(timer);                }                oUl1.onmouseout = function(){                    timer = setInterval(move,30);                }                document.getElementsByTagName('a')['0'].onclick = function(){return speed = -2};                document.getElementsByTagName('a')['1'].onclick = function(){return speed = 2};            }        </script>    </head>    <body>        <a href="javascricp:;">向左</a>        <a href="javascricp:;">向右</a>        <div id="div1">            <ul id='ul1'>                <li><img src="https://p1.so.qhmsg.com/bdr/_240_/t017fa86a892f1b4e06.jpg"></li>                <li><img src="https://p1.so.qhimgs1.com/bdr/_240_/t01e758a4a1c8f3cf8d.jpg"></li>                <li><img src="https://p1.so.qhmsg.com/bdr/_240_/t01690c2b67a8ae28a6.jpg"></li>                <li><img src="https://p0.so.qhimgs1.com/bdr/_240_/t0174cbb4ffbbac0510.jpg"></li>            </ul>        </div>    </body></html>

文章转载于:https://www.jianshu.com/p/157f05206125

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《无缝滚动》