利用JavaScript做无缝滚动

<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>
附件下载
巴特西

利用JavaScript做无缝滚动

最新文章

热门文章
