JS Picture Rotation

<! DOCTYPE HTML> 
<HTML> 
	<head> 
		<Meta charset = "UTF-. 8"> 
		<title> </ title> 
		<style type = "text / CSS"> 
			
			* { 
				margin: 0; 
				padding: 0; 
			} 
			
			# Outer { 
				width: 500px; 
				margin: 50px Auto; 
				padding: 10px; 
				background-Color: GreenYellow; 
				/ * set the center text * / 
				text-align = left: Center; 
			} 
		</ style> 
		
		<Script type = "text / JavaScript"> 
			
			window .onload = function () {// document is fully loaded onload function after the completion of loading 
				
				/ * 
				 * click the button to switch pictures 
				 * / 
				
				// get two buttons  
				var prev = document.getElementById("prev");
				var next = document.getElementById("next");
				
				/* 
				 * To switch is to modify the image tag img src attribute 
				 * / 
				
				// Get img tag, the tag returns from the end of the array type 
				var img = document.getElementsByTagName ( "img" ) [0]; // HTMLImageElement 
				
				// create an array, to save the image path 
				var imgArr = [ "img / 1.jpg ", "img / 2.jpg", "img / 3.jpg", "img /4.jpg "," img / 5.jpg "]; 
				
				// create a variable to save the image currently being displayed in the index 
				var index = 0; 
				
				// get the id info p elements 
				var info = document.getElementById ( "info"); 
				// set the prompt text 
				info.innerHTML = "total" + imgArr.length + "pictures present" + (index + 1) + " Zhang"; // no goods will fight parentheses string 
				
				
				// click the button bindings are two response function 
				prev.= function the onclick () { 
					/ * 
					 * to a handover, decrement index 
					 * / 
					index The;
					
					// determines whether the index is less than 0
					IF (index <0) { 
						index = imgArr.length -. 1; 
					} 
					
					img.src imgArr = [index]; 
					
					// when the button after re-setting information 
					info.innerHTML = "Total" + imgArr.length + "pictures, currently "+ (index + 1) + " Zhang "; 
				}; 
				
				next.onclick = function () { 
					
					/ * 
					 * shifts to the next index is incremented 
					 * / 
					index ++; 
					
					IF (index> imgArr.length -. 1) { 
						index = 0; 
					} 
					
					// switch is to modify the image img src attribute 
					// to modify the properties of an element attribute = attribute value. 
					img.src imgArr = [index]; 
					
					// when the click of a button, to reset the information 
					info .innerHTML = "total" + imgArr.length + "pictures Present" + (index + 1) + " Zhang"; 
					
				}; 
			}; 

		</script>
	</head>
	<body>
		<div id="outer">
			
			<p id="info"></p>
			
			<img src="img/1.jpg" alt="冰棍" />
			
			<button id="prev">上一张</button>
			<button id="next">下一张</button>
			
		</div>
	</body>
</html>
Guess you like
