图片无缝滚动 - Newbie_小白

代码：
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #div1 {
            width: 712px;
            height: 108px;
            margin: 100px auto;
            position: relative;
            overflow: hidden; /*如果去掉此项，则将图片设置成只能显示四张滚动 */
        }

        #div1 ul {
            /* 此项必须设置*/
            position: absolute;
            left: 0;
            top: 0;
        }

        #div1 ul li {
            float: left; /* 此项必须设置*/
            width: 178px;
            height: 108px;
            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+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';
                }
                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>
</head>

<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>

<div id="div1">
    <ul>
        <li><img src="img2/1.jpg" alt="此处为第一张图片"/></li>
        <li><img src="img2/2.jpg" alt="此处为第二张图片"/></li>
        <li><img src="img2/3.jpg" alt="此处为第三张图片"/></li>
        <li><img src="img2/4.jpg" alt="此处为第四张图片"/></li>    
　　</ul>
</div>
</body>
</html>
运行结果（其中图片在匀速向左滚动）：
posted on 2016-03-11 13:10 Newbie_小白阅读(248) 评论(0) 编辑收藏举报