利用JavaScript做无缝滚动

2018-06-24 00:56:11来源：未知阅读 ()

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    #div1 {width:400px;height:100px;margin:50px 0 0 350px;overflow: hidden;position: absolute;background: red;}
    #div1 ul{position: absolute;left: 0;top: 0;}
    #div1 ul li {float: left;width:100px;height: 100px; list-style:none;}
</style>
</head>

<body>
<a href="javascript:;">向左走</a>
<a href="javascript:;">向右走</a>
<a href="javascript:;">中速</a>
<a href="javascript:;">高速</a>
<div id="div1">
<ul>
    <li><img src="01.jpg" /></li>
    <li><img src="02.jpg" /></li>
    <li><img src="03.jpg" /></li>
    <li><img src="04.jpg" /></li>
</ul>
</div>
<script type="text/javascript">
    var odiv=document.getElementById('div1');
    var oul=odiv.getElementsByTagName('ul')[0];
    var oli=oul.getElementsByTagName('li');
    var speed=-2;
    oul.innerHTML=oul.innerHTML+oul.innerHTML;
    oul.style.width=oli[0].offsetWidth*oli.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;
    }
        document.getElementsByTagName('a')[2].onclick=function()
    {
        speed=-1;
    }
        document.getElementsByTagName('a')[3].onclick=function()
    {
        speed=-4;
    }
</script>
</body>
</html>