这个小DEMO，主要用box固定长宽用于显示图片，将图片放入imagebox中，连接起来，每次换图片则将imagebox的style属性的margin-left改动，能形成轮播的效果。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>无标题文档</title>
<style>
.box{
width:900px;
height:350px;
margin:20px;
overflow:hidden;
margin:0auto;
}
.imagebox{
width:3600px;
height:350px;
-webkit-transition:all1sease-in-out;
-moz-transition:all1sease-in-out;
-o-transition:all1sease-in-out;
transition:all1sease-in-out;
}
.imageboximg{
width:900px;
float:left;
height:350px;
}
</style>
</head>
<body>
<div>
<divid="ImageBox">
<imgsrc="images/图片点击轮转/image-53.jpg"/>
<imgsrc="images/图片点击轮转/image-54.jpg"/>
<imgsrc="images/图片点击轮转/image-55.jpg"/>
<imgsrc="images/图片点击轮转/image-56.jpg"/>
</div>
</div>
<div>
<inputtype="button"value="left"onclick="turnleft()"/>
<inputtype="button"value="right"onclick="turnright()"/>
</div>
<scriptlanguage="javascript">
varint=setInterval("change()",3*1000);
vara=document.getElementById("ImageBox");
vari=1;
functionchange(){
if(i==4){
i=0;
}
i=i+1;
a.style.marginLeft=(1-i)*900+"px";
}
functionstopchange(){clearInterval(int);}
functionstartchange(){int=setInterval("change()",2*1000);}
a.onmouseover=function(){clearInterval(int);}
a.onmouseout=function(){int=setInterval("change()",2*1000);}
functionturnleft(){
stopchange();
i=i+1;
a.style.marginLeft=(1-i)*900+"px";
if(i==4){
i=0;
}
startchange();
}
functionturnright(){
stopchange();
if(i>1){
a.style.marginLeft=(2-i)*900+"px";
i=i-1;
}else{
a.style.marginLeft=-3*900+"px";
i=4;
}
startchange();
}
</script>
</body>
</html>
