JavaScript无缝滚动

1.HTML结构：

<div id="div1">
            <ul>
                <li><img src="img2/1.jpg" width="400px" height="400" ></li>
                <li><img src="img2/2.jpg" width="400px" height="400"></li>
                <li><img src="img2/3.jpg" width="400px" height="400" ></li>
                <li><img src="img2/4.jpg" width="400px" height="400"></li>
            </ul>
        </div>

2.css样式：

*{margin:0;padding:0;}
            #div1{width:400px;height:400px;border:1px solid #ccc;position:absolute;top:50px;left:50px;overflow: hidden;}
            #div1 ul{position:relative;left:0;top:0;}
            #div1 ul li{list-style: none;width:400px;height:400px;float:left;}

3.JavaScript代码：

window.onload=function (){
                var odiv=document.getElementById('div1');
                var oul=odiv.getElementsByTagName('ul')[0];
                var oli=oul.getElementsByTagName('li');
                
                oul.innerHTML=oul.innerHTML+oul.innerHTML;
                oul.style.width=oli[0].offsetWidth*oli.length+'px';
                //设置定时器
                function mover (){
                    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-400+'px';
                }
                var timer=setInterval(mover,300);
                odiv.onmousemove=function(){
                    clearInterval(timer);
                }
                odiv.onmouseout=function (){
                    timer=setInterval(mover,300);
                }
            }

可以直接改下width值