这个小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>