无缝连接滚动

*{ padding: 0; margin: 0;}

li{ list-style: none;}

.wrapper{

width:220px;

height: 140px;

overflow: hidden;

position: relative;

margin: 40px auto;

border: 2px solid #ddd;

}

.wrapper .content{

height: 800px;

position: absolute;

top: 0;

}

.wrapper .content ul li{

margin-right:10px;

height: 100%;

}

img{

margin-top: 3px;

}

window.onload=function(){

var oWap=document.getElementById("wrapper");

var oCon=document.getElementById("con");

var oU=document.getElementById("ull");

var aList=oU.getElementsByTagName("li");

var len=aList.length;

oU.innerHTML+=oU.innerHTML;

var nowleft=0;

var timer;

oWap.onmouseover=function(){

clearInterval(timer);

}

oWap.onmouseout=function(){

move();

}

function move(){

clearInterval(timer);

timer=setInterval(function(){

nowleft-=3;

if(nowleft<-150*len){

nowleft=0;

}

oCon.style.top=nowleft+"px";

},10);

}

}

无缝连接滚动的原理改变包围图片的盒子的left的变化，利用js中setInterval()和clearInterval（）实现运动和停止的操作！