兼容IE7以上的无缝滚动,带箭头、停顿

<!DOCTYPE HTML>
<html>

    <head>
        <meta charset="utf-8" />
        <title>无缝滚动</title>
        <link href="">
    </head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        a{
            cursor: pointer;
        }
        #div1 {
             800px;
            height: 130px;
            margin:50px auto;
            position: relative;
            background: red;
            overflow: hidden;
        }
        ul {
            position: absolute;
            left: 0;
            top: 0;
        }
        li {
            float: left;
            list-style: none;
        }
        li img {
             200px;
            height: 130px;
        }
    </style>

    <script>
         //        setInterval(function() {
         //                var oDiv=document.getElementById("div1");
         //                oDiv.style.left=oDiv.offsetLeft+10+'px';
         //        },30);
        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 + oUl.innerHTML;
            oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';
            function move() {
                if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
                    oUl.style.left = '0';
                }
                //向左滚
                //        oUl.style.left=oUl.offsetLeft-2+'px';
                //向右滚
                if (oUl.offsetLeft >0) {
                    oUl.style.left =-oUl.offsetWidth /2+'px';
                }
                oUl.style.left = oUl.offsetLeft + speed + 'px';
            }
            var timer=setInterval(move, 30);
            oDiv.onmouseover=function(){
                clearInterval(timer);
            };
            oDiv.onmouseout=function(){
                timer=setInterval(move, 30);
            };
            document.getElementsByTagName('a')[0].onclick=function(){
                speed=-2;
            };
            document.getElementsByTagName('a')[1].onclick=function(){
                speed=2;
            }
        }
    </script>

    <body>
    <a>向左走</a>
    <a>向右走</a>
        <div id="div1">
            <ul>
                <li><img src="images/1.jpg" /></li>
                <li><img src="images/2.jpg" /></li>
                <li><img src="images/1.jpg" /></li>
                <li><img src="images/2.jpg" /></li>
            </ul>
        </div>
    </body>

</html>

原文地址:https://www.cnblogs.com/zhouyx/p/4667809.html