Switching picture

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <script type="text/javascript">
 8      window.onload=function(){
 9          var prev=document.getElementById("prev");
10          varNext = document.getElementById ( " Next " );
 . 11           var IMG = document.getElementsByTagName ( " IMG " ) [ 0 ];
 12 is           // create a path to save the image array 
13 is           var imgArr = [ " 1.jpg " , " 2.png " , " 3.jpg " , " 4.png " , " 5.png " ];
14           // create a variable to save the image currently being displayed in the index 
15           varindex = 0 ;
 16           var info = document.getElementById ( " info " );
 . 17           info.innerHTML = " Total " + imgArr.length + " Pictures Present " + (index + . 1 ) + " Zhang " ;
 18 is           PREV .onclick = function () {
 . 19           Alert ( " Previous " );
 20 is           index - ;
21 is           IF (index < 0 ) {
 22 is           index = imgArr.length - . 1 ;
 23 is           }
 24           info.innerHTML = " Total " + imgArr.length + " Pictures Present " + (index + . 1 ) + " Zhang " ;
 25           img.src = imgArr [index];
 26 is           }
 27          next.onclick = function () {
 28            Alert ( " next " );
 29             index ++ ;
 30             IF (index > . 4 ) index = 0 ;
 31 is             info.innerHTML = " Total " + imgArr.length + " Pictures Present " + (index + . 1 ) + " Zhang " ;
 32             img.src = imgArr [index];
 33 is          }
 34 is              };
 35  
36     </script>
37   <style type="text/css">
38       *{
39       margin:0px;
40       padding:0px;
41       }
42       #outer{
43       width:1208px;
44       height:735px;
45       margin:50px auto;
46       padding:10px 10px 0px 10px;
47       background-color:yellowgreen;
48       /* 设置文本居中 */
49       text-align:center;
50       }
51   </style>
52 <body>
53 <div id="outer">
54     <p id="info"></p>
55     <img src="1.jpg" alt="vv" />
56         <button id="prev">Previous </ Button > 
57 is          < Button ID = "Next" > Next </ Button > 
58  </ div > 
59  </ body > 
60  </ HTML >
Guess you like
