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

134 阅读 0 评论 89 点赞

我是靠谱客的博主俊秀睫毛，最近开发中收集的这篇文章主要介绍用box固定长宽实现图片自动轮播js代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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