对于js部分：

<script>

window.οnlοad=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].οnmοuseοver=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.οnclick=auto;

//左边按钮事件

left.οnclick=auto1;

//定时器

var timer=setInterval(auto,1000);

all.οnmοusemοve=function(){

arr.style.display="block";

clearInterval(timer);

}

all.οnmοuseοut=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>