定时器应用（二） - 《JavaScript》

无缝滚动基础
无缝滚动进阶

无缝滚动基础

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #div1{
            width:1200px ;
            height: 85px;
            position: relative;
            margin: 100px auto;
            overflow: hidden;  /*最后用overflow: hidden限制div宽 实现无缝滚动*/
        }
        #div1 ul{
            position: absolute;
            left: 0;
            top: 0;
        }
        #div1 ul li{
            float: left;
            width: 200px;
            height: 85px;
            list-style: none;
        }
    </style>
    <script>
        window.onload=function () {
            var oDiv = document.getElementById('div1');
            var oUl = oDiv.getElementsByTagName('ul')[0];
            var aLi = oUl.getElementsByTagName('li');
            oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//把ul中的内容复制一份，重复出现一次，一行出现12张图
            oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';//让ul的宽，等于li的个数乘宽度
            setInterval(function () {
                if (oUl.offsetLeft<-oUl.offsetWidth/2){  //当ul向左的距离小于ul的宽的二分之一的时候
                    oUl.style.left='0';//ul的位置归零
                }
                oUl.style.left=oUl.offsetLeft-2+'px'; //在定时器中 让ul一直向左2px
            },30)
        }
    </script>
</head>
<body>
<div id="div1">
    <ul>
        <li><img src="scroll_img/1.jpg" style="width: 200px;height: 85px"/></li>
        <li><img src="scroll_img/2.jpg" style="width: 200px;height: 85px"/></li>
        <li><img src="scroll_img/3.jpg" style="width: 200px;height: 85px"/></li>
        <li><img src="scroll_img/4.jpg" style="width: 200px;height: 85px"/></li>
        <li><img src="scroll_img/5.jpg" style="width: 200px;height: 85px"/></li>
        <li><img src="scroll_img/6.jpg" style="width: 200px;height: 85px"/></li>
    </ul>
</div>
</body>
</html>

无缝滚动进阶

可调节左右滚动，但会出现刷新后不动，当鼠标放上再离开才会动的问题
解决办法：

 var timer = setInterval(function move() {
                if (oUl.offsetLeft < -oUl.offsetWidth/2){  //当ul向左的距离小于ul的宽的二分之一的时候
                    oUl.style.left='0';//ul的位置归零
                }
                if(oUl.offsetLeft > 0){ //当ul向右的距离大于零的时候
                    oUl.style.left = -oUl.offsetWidth/2+'px'  //让ul滚动的距离等于ul的一半
                }
                oUl.style.left = oUl.offsetLeft+speed+'px'; //在定时器中 ul滚动的距离等于ul向左滚动speed(speed可正可负即向右向左)
            },30)//直接封装 不用单独封装

问题代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #div1{
            width:1200px ;
            height: 85px;
            position: relative;
            margin: 100px auto;
            overflow: hidden;  /*最后用overflow: hidden限制div宽 实现无缝滚动*/
        }
        #div1 ul{
            position: absolute;
            left: 0;
            top: 0;
        }
        #div1 ul li{
            float: left;
            width: 200px;
            height: 85px;
            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;//把ul中的内容复制一份，重复出现一次，一行出现12张图
            oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';//让ul的宽，等于li的个数乘宽度
            function move() {
                if (oUl.offsetLeft<-oUl.offsetWidth/2){  //当ul向左的距离小于ul的宽的二分之一的时候
                    oUl.style.left='0';//ul的位置归零
                }
                if(oUl.offsetLeft>0){ //当ul向右的距离大于零的时候
                    oUl.style.left=-oUl.offsetWidth/2+'px'  //让ul滚动的距离等于ul的一半
                }
                oUl.style.left=oUl.offsetLeft+speed+'px'; //在定时器中 ul滚动的距离等于ul向左滚动speed(speed可正可负即向右向左)
            }
            var timer = setInterval(move(),30);
            oDiv.onmouseover=function () {
                clearInterval(timer);  //鼠标放进去 计时器关闭
            };
            oDiv.onmouseout= function () {
                timer = setInterval(move,30);
            };
            document.getElementsByTagName('a')[0].onclick = function () { //当点击第一个a标签时 speed = -2 即向左
                speed = -2;
            };
            document.getElementsByTagName('a')[1].onclick = function () {//当点击第二个a标签时 speed = 2 即向右
                speed = 2;
            };
        }
    </script>
</head>
<body>
<a href="#">向左</a>
<a href="#">向右</a>
<div id="div1">
    <ul>
        <li><img src="scroll_img/1.jpg" style="width: 200px;height: 85px"/></li>
        <li><img src="scroll_img/2.jpg" style="width: 200px;height: 85px"/></li>
        <li><img src="scroll_img/3.jpg" style="width: 200px;height: 85px"/></li>
        <li><img src="scroll_img/4.jpg" style="width: 200px;height: 85px"/></li>
        <li><img src="scroll_img/5.jpg" style="width: 200px;height: 85px"/></li>
        <li><img src="scroll_img/6.jpg" style="width: 200px;height: 85px"/></li>
    </ul>
</div>
</body>
</html>