用box固定长宽实现图片自动轮播js代码
<!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>
热门推荐
10 香港老妈结婚祝福语简短
11 毕业立体贺卡祝福语简短
12 简短新年年会祝福语
13 评论小品祝福语大全简短
14 恭喜师兄结婚祝福语简短
15 员工集体辞职祝福语简短
16 高中新生祝福语 简短
17 装修祝福语男生搞笑简短
18 生日开业蛋糕祝福语简短