无缝滚动

 

 对于js部分：

<script>

window.onload=function(){

}

var all=document.getElementById("all");
var screen=document.getElementById("screen");
var imgWidth=screen.offsetWidth;
var ul=document.getElementById("ul");
var ulLiArr=ul.children;
var ol=screen.children[1];
var arr=screen.children[2];
var left=document.getElementById("left");
var right=document.getElementById("right");

//copy
ul.appendChild(ulLiArr[0].cloneNode(true));
//ol内容填充
for (var i=0;i<ulLiArr.length-1;i++){
var newli=document.createElement("li");
newli.innerHTML=i+1;
ol.appendChild(newli);
}

//点亮样式
var olLiArr=ol.children;
olLiArr[0].className="current";

//绑定动画
for (var i=0;i<olLiArr.length;i++){
olLiArr[i].onmouseover=function(){
for(var j=0;j<olLiArr.length;j++){
olLiArr[j].className="";
}
this.className="current";
animate(ul,-imgWidth*(this.innerHTML-1));
key=square=this.innerHTML-1;

}
}
//右边按钮事件
var key=0;
var square=0;
right.onclick=auto;
//左边按钮事件
left.onclick=auto1;

//定时器
var timer=setInterval(auto,1000);

all.onmousemove=function(){
arr.style.display="block";
clearInterval(timer);
}
all.onmouseout=function(){
arr.style.display="none";
timer=setInterval(auto,1000);
}
//右边按钮的封装
function auto(){
key++;
if (key===6){
ul.style.left=0;
key=1;
}
square++;
if (square===5){
square=0;
}
for(var j=0;j<olLiArr.length;j++){
olLiArr[j].className="";
}
olLiArr[square].className="current";
animate(ul,-imgWidth*key);
}
//左边按钮的封装
function auto1(){
key--;
if (key===-1){
ul.style.left=-imgWidth*5+"px";
key=4;
}
square--;
if (square===-1){
square=4;
}
for(var j=0;j<olLiArr.length;j++){
olLiArr[j].className="";
}
olLiArr[square].className="current";
animate(ul,-imgWidth*key);
}
}
function animate(ele,target){
clearInterval(ele.timer);
ele.timer=setInterval(function(){
var sep=target>ele.offsetLeft?10:-10;
ele.style.left=ele.offsetLeft+sep+"px";
if (Math.abs(target-ele.offsetLeft)<=Math.abs(sep)){
ele.style.left=target+"px";
clearInterval(ele.timer);
}
},10);
}

</script>