无缝滚动，JavaScript

最新推荐文章于 2024-11-13 01:18:00 发布

dgcw2015

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量77

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sishiuliunian/p/4896028.html

版权

好想哭，不容易啊，终于磕磕绊绊写了一个稍微难一点的东西了，还是要多写几遍啊

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script>
            window.onload=function()
            {
                var odiv=document.getElementById('div1');
                var oul=document.getElementById('ul1');
                var oli=oul.getElementsByTagName('li');
                var speed=2;
                var oa=document.getElementsByTagName('a');
                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 timr=setInterval(move,30);
                odiv.onmouseover=function(){
                    clearInterval(timr);
                }
                odiv.onmouseout=function(){
                    timr=setInterval(move,30);
                }
                oa[0].onclick=function(){
                    speed=-2;
                }
                oa[1].onclick=function(){
                    speed=2;
                }
            };
        </script>
        <style>
            *{padding: 0;margin: 0;}
            
            #div1{position: relative; background: blueviolet;width: 1128px;height: 250px; margin: 0 auto;overflow: hidden;}
            ul{position: absolute; left:0;top:0;width: 1128px;height: 250px; }
            li{float: left;list-style: none;}
        </style>
    </head>
    <body>
        <a href="#">zuo</a>
        <a href="#">you</a>
        <div id="div1">
            <ul id="ul1">
                <li><img src="img/1.jpg"></li>
                <li><img src="img/2.jpg"></li>
                <li><img src="img/3.jpg"></li>
            </ul>
        </div>
    </body>
</html>