无缝滚动

第一种方法:

 

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        *{
            margin:0px;
            padding:0px;
        }
            #box{
                position: relative;
                width:880px;
                height:220px;
                margin:50px auto;
                border:1px solid #999;
                overflow: hidden;
            }
            #box ul{   /*ul不能设置宽度*/
                height:200px;
                position:absolute;
                top:0;
                left:0px;
                padding:10px 0;
            }
            #box ul li{
                width:200px;
                height:200px;
                float:left;
                padding:0 10px;
                list-style: none;
            }
            #box ul li img{
                width:200px;
                height:200px;
            }
        </style>
        <script>
            window.onload=function(){
                var oBox=document.getElementById("box");
                var oUl=oBox.children[0];
                var aLi=oUl.getElementsByTagName('li');
                var oLeft=document.getElementById("left");
                var oRight=document.getElementById("right");
                var timer=null;
                var speed=0;
                oUl.innerHTML+=oUl.innerHTML;          //复制一份oUl的内容
                oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';//设置oUl的宽度
                clearInterval(timer);
                function tab(){
                    var l=oUl.offsetLeft+speed;
                                                //向左运动,当l小于oUl宽度的一半时,l=0
                    if(l<=-oUl.offsetWidth/2){   
                        l=0;
                    }
                                                //向右运动,当l大于0时,l=oUl宽度的一半
                    if(l>0){l=-oUl.offsetWidth/2}  
                    oUl.style.left=l+'px';
                }
                timer=setInterval(tab,30);
                oLeft.onclick=function(){
                    speed=-6;
                }
                oRight.onclick=function(){
                    speed=6;
                }
                oBox.onmouseover=function(){
                    clearInterval(timer);
                }
                oBox.onmouseout=function(){
                    timer=setInterval(tab,30);
                }
                document.onkeydown=function(ev){
                    var e=ev||event;
                    if(e.keyCode==37){
                        speed=-6;
                    }
                    if(e.keyCode==39){
                        speed=6;
                    }
                }
            }
        </script>
    </head>
    <body>
        <input type="button" id="left" value="向左"/>
        <input type="button" id="right" value="向右"/>
        <div id="box">
            <ul>
                <li><img src="img/0.jpg"></img></li>
                <li><img src="img/1.jpg"></img></li>
                <li><img src="img/2.jpg"></img></li>
                <li><img src="img/3.jpg"></img></li>
            </ul>
        </div>
    </body>
</html>

 

 

第二种方法:

 

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        *{
            margin:0px;
            padding:0px;
        }
            #box{
                position: relative;
                width:880px;
                height:220px;
                margin:50px auto;
                border:1px solid #999;
                overflow: hidden;
            }
            #box ul{
                height:200px;
                position:absolute;
                top:0;
                left:0px;
                padding:10px 0;
            }
            #box ul li{
                width:200px;
                height:200px;
                float:left;
                padding:0 10px;
                list-style: none;
            }
            #box ul li img{
                width:200px;
                height:200px;
            }
        </style>
        <script>
            window.onload=function(){
                var oBox=document.getElementById("box");
                var oUl=oBox.children[0];
                var aLi=oUl.getElementsByTagName('li');
                var oLeft=document.getElementById('left');
                var oRight=document.getElementById('right');
                var timer=0;
                oUl.innerHTML+=oUl.innerHTML;
                oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
                var w=oUl.offsetWidth/2;  
                var l=0;                    //走的距离
                var speed=0;       //运动的速度
                function tab(){
                    l+=speed;
                    oUl.style.left=(l%w-w)%w+'px';  //l%w保证向右的left不会超过0，保证向左的l等于left
                }
                clearInterval(timer);
                timer=setInterval(tab,30);
                oLeft.onclick=function(){
                    speed=-6;
                }
                oRight.onclick=function(){
                    speed=6;
                }
                oBox.onmouseover=function(){
                    clearInterval(timer);
                }
                oBox.onmouseout=function(){
                    timer=setInterval(tab,30);
                }
                document.onkeydown=function(ev){
                    var e=ev||event;
                    if(e.keyCode==37){speed=-6}
                    if(e.keyCode==39){speed=6}
                }
            }
        </script>
    </head>
    <body>
        <input type="button" id="left" value="向左" />
        <input type="button" id="right" value="向右" />
        <div id="box">
            
            <ul>
                <li><img src="img/0.jpg"></img></li>
                <li><img src="img/1.jpg"></img></li>
                <li><img src="img/2.jpg"></img></li>
                <li><img src="img/3.jpg"></img></li>
            </ul>
        </div>
    </body>
</html>

 

posted @ 2016-07-25 20:53  河南小样  阅读(146)  评论(0)    收藏  举报