Day_10

无缝滚动控制

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {margin: 0; padding: 0;}
        .div1 {width: 1000px; height: 313px; margin: 100px auto; position: relative; background: red;overflow: hidden;}
        .div1 ul {position: absolute; left: 0; top: 0;}
        .div1 ul li {float: left; width: 500px; height: 313px; list-style: none;}
    </style>
    <script>
        window.onload = function () {
            var oDiv = document.getElementsByClassName('div1');
            var oUl = oDiv[0].getElementsByTagName('ul')[0];
            var aLi = oUl.getElementsByTagName('li');
            var timer = null;
            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';
            }

            timer = setInterval(move,30);

            oDiv[0].onmouseover = function () {
                clearInterval(timer)
            };

            oDiv[0].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 class = "div1">
    <ul>
        <li><img src = "roll_img/2.jpg"/></li>
        <li><img src = "roll_img/3.jpg"/></li>
        <li><img src = "roll_img/4.jpg"/></li>
        <li><img src = "roll_img/5.jpg"/></li>
        <li><img src = "roll_img/6.jpg"/></li>
        <li><img src = "roll_img/7.jpg"/></li>
    </ul>
</div>
</body>
</html>

 

　　

　　页面滚动的JS实现，能用CSS写的，绝对不要用JS，这样会降低页面加载的性能。

 

posted @ 2019-07-19 19:48  沐晴皓月  阅读(139)  评论(0)    收藏  举报