Box fixed length and width to achieve automatic image rotation js code

  • 2020-03-30 03:15:14
  • OfStack

This small DEMO mainly USES the box to fix the length and width to display the picture, puts the picture into the imagebox, connects it, and changes the margin-left of the style property of the imagebox every time the picture is changed, which can form the effect of rotation.
 
<!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> Headless document </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/ Click on rotation /image-53.jpg" /> 
<img class="trans_image" src="images/ Click on rotation /image-54.jpg"/> 
<img class="trans_image" src="images/ Click on rotation /image-55.jpg"/> 
<img class="trans_image" src="images/ Click on rotation /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> 

Related articles: