用box固定长宽实现图片自动轮播js代码

发布时间：2020-12-14 23:15:35 所属栏目：资源来源：网络整理

导读：这个小DEMO，主要用box固定长宽用于显示图片，将图片放入imagebox中，连接起来，每次换图片则将imagebox的style属性的margin-left改动，能形成轮播的效果。复制代码代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

这个小DEMO，主要用box固定长宽用于显示图片，将图片放入imagebox中，连接起来，每次换图片则将imagebox的style属性的margin-left改动，能形成轮播的效果。

复制代码代码如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style> 
.box { 
width: 900px; 
height: 350px; 
margin: 20px; 
overflow: hidden; 
margin:0 auto; 
} 
.imagebox { 
width: 3600px; 
height: 350px; 
-webkit-transition: all 1s ease-in-out; 
-moz-transition: all 1s ease-in-out; 
-o-transition: all 1s ease-in-out; 
transition: all 1s ease-in-out; 
} 
.imagebox img { 
width: 900px; 
float: left; 
height: 350px; 
} 
</style> 
</head> 

<body> 
<div class="box"> 
<div id="ImageBox" class="imagebox"> 
<img class="trans_image" src="images/图片点击轮转/image-53.jpg" /> 
<img class="trans_image" src="images/图片点击轮转/image-54.jpg"/> 
<img class="trans_image" src="images/图片点击轮转/image-55.jpg"/> 
<img class="trans_image" src="images/图片点击轮转/image-56.jpg"/> 
</div> 
</div> 
<div> 
<input type="button" value="left" onclick="turnleft()"/> 
<input type="button" value="right" onclick="turnright()"/> 
</div> 
<script language="javascript"> 
var int=setInterval("change()",3*1000); 
var a=document.getElementById("ImageBox"); 
var i=1; 
function change(){ 
if(i==4){ 
i=0; 
} 
i=i+1; 
a.style.marginLeft=(1-i)*900+"px"; 

} 
function stopchange(){clearInterval(int);} 
function startchange(){int=setInterval("change()",2*1000);} 
a.onmouSEOver=function(){clearInterval(int);} 
a.onmouSEOut=function() {int=setInterval("change()",2*1000);} 
function turnleft(){ 
stopchange(); 
i=i+1; 
a.style.marginLeft=(1-i)*900+"px"; 
if(i==4){ 
i=0; 
} 
startchange(); 
} 
function turnright(){ 
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> 

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!