JS无缝滚动 | 易学教程

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    *{margin:0;padding:0;}
    #div1 {width:712px;height:108px;margin:100px auto;}
    #div1 ul {position:absolute;left:0;top:0;}
    #div1 ul li{width:200px;height:200px;background: red;position: absolute;left:200px;top:150px;}
</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;//4+4==8
    oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
    function move(){ //定时器函数
        if(oUl.offsetLeft<-oUl.offsetWidth/2){//offsetLeft偏移量，往左是负数,offsetWidth宽度，是正数。左移
            oUl.style.left='0';//坐标重置为0
        }
        if(oul.style.left>0){//右移,负数变0表示右移过了4个li了
            oUl.offsetLeft=-oUl.offsetWidth/2+'px';//左偏移量 变成 -宽度一半，表示8个li居中.0不加px,有数字的要加px
        }
        oUl.style.left=oDiv.offsetLeft+speed+'px';//给当前对象左边距+2px右移 并返回
    }
    var timer=setInterval(move,30);//参数里面运行有名函数move不用带(),这是js区别于java的不同点
    //添加鼠标移入事件
    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 href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<div id="div1">
    <ul>
        <li><img src="img2/1.jpg" /></li>
        <li><img src="img2/2.jpg" /></li>
        <li><img src="img2/3.jpg" /></li>
        <li><img src="img2/4.jpg" /></li>
    </ul>
</div>
</body>
</html>
来源：https://www.cnblogs.com/blacop/p/5918333.html
标签
getelementsbytagname