JS image automatic rotation effect to achieve ideas attached screenshots

  • 2020-03-30 02:47:15
  • OfStack

Today is not in the state, quiet May Day is coming soon, I want to play. Okay, it's getting late, so without further ado, take a look at the image auto-rotation effect implemented in javaScript and look at the image first
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201404/201404301055501.gif? 201433010565 ">  
The following is the specific code, or relatively simple.
 
<!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> Escaped prisoner </title> 
<style type="text/css"> 
.content{ 
border:3px solid red; 
padding:3px; 
width:500px; 
height:245px; 
position:relative; 
} 
.content img{ 
border:0; 

} 
.content div{ 
position:absolute; 
z-index:1000; 
border:2px solid green; 
padding:3px 5px; 
background:#ccc; 
} 
.content .cur{background:red;color:white;}//The small square of the image currently displayed, with a red background and white font
</style> 
<script type="text/javascript"> 
var arr=['images/1.jpg','images/2.jpg','images/3.jpg','images/4.gif','images/5.jpg']; 
var i=0; 
var ob,obk; 
function lunhuan(){ 

if(i>4){//If the number is greater than 4, we start at 0
i=0; 
} 
ob=document.getElementById("image1"); 
ob.src=arr[i]; 
//All div-0 through div-4, and the background color is gray
for(var j=0;j<=4;j++){ 
document.getElementById("div-"+j).style.backgroundColor='#ccc'; 
document.getElementById("div-"+j).style.color='black'; 
} 
obk=document.getElementById("div-"+i); 
obk.style.backgroundColor='red'; 
obk.style.color='white'; 
i++; 
} 
</script> 
</head> 
<body onload="window.setInterval(lunhuan,1000);"> 
<div class="content"> 
<img id="image1" src="images/1.jpg"/> 
<div class="cur" id="div-0" style="top:215px;right:128px;">1</div> 
<div id="div-1" style="top:215px;right:98px;">2</div> 
<div id="div-2" style="top:215px;right:68px;">3</div> 
<div id="div-3" style="top:215px;right:38px;">4</div> 
<div id="div-4" style="top:215px;right:8px;">5</div> 
</div> 
<input type="button" value="test" onclick="lunhuan();"/> 
</body> 
</html> 

Briefly describe the process:

1. Define the outermost DIV first

2. Define the next image DIV

3. The small square DIV in the lower right corner of the picture

With the timer function, the rotation of the picture, and let the small square also produce changes to the.

OK, sleep.

Related articles: