这个小DEMO,主要用box固定长宽用于显示图片,将图片放入imagebox中,连接起来,每次换图片则将imagebox的style属性的margin-left改动,能形成轮播的效果。 复制代码 代码如下: 无标题文档 <br>.box { <br>width: 900px; <br>height: 350px; <br>margin: 20px; <br>overflow: hidden; <br>margin:0 auto; <br>} <br>.imagebox { <br>width: 3600px; <br>height: 350px; <br>-webkit-transition: all 1s ease-in-out; <br>-moz-transition: all 1s ease-in-out; <br>-o-transition: all 1s ease-in-out; <br>transition: all 1s ease-in-out; <br>} <br>.imagebox img { <br>width: 900px; <br>float: left; <br>height: 350px; <br>} <br> <br>var int=setInterval("change()",3*1000); <br>var a=document.getElementById("ImageBox"); <br>var i=1; <br>function change(){ <br>if(i==4){ <br>i=0; <br>} <br>i=i 1; <br>a.style.marginLeft=(1-i)*900 "px"; <br><br>} <br>function stopchange(){clearInterval(int);} <br>function startchange(){int=setInterval("change()",2*1000);} <br>a.onmouseover=function(){clearInterval(int);} <br>a.onmouseout=function() {int=setInterval("change()",2*1000);} <br>function turnleft(){ <br>stopchange(); <br>i=i 1; <br>a.style.marginLeft=(1-i)*900 "px"; <br>if(i==4){ <br>i=0; <br>} <br>startchange(); <br>} <br>function turnright(){ <br>stopchange(); <br>if(i>1){ <br>a.style.marginLeft=(2-i)*900 "px"; <br>i=i-1; <br>}else{ <br>a.style.marginLeft=-3*900 "px"; <br>i=4; <br>} <br>startchange(); <br>} <br>