<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #main{ width: 300px; padding: 20px; margin: 10px auto; background-color: yellow; text-align: center; } </style> </head> <body> <div id="main"> <p id="info"></p> <img src="img/1.jpg"/> <button id="pre">上一张</button> <button id="next">下一张</button> </ div> </body> <Script of the type = "text / JavaScript"> // get the button name element var pre = document.getElementById ( "pre" ); var the Next = document.getElementById ( "the Next" ); // create an array to save the image path, image switching picture is switched path var imgArr = [ "img / 1.jpg", "img / 2.jpg", "img / 3.jpg", "img / 4.jpg" ]; // Get img element, imparting img array element var img = document.getElementsByTagName ( "img") [0 ]; // Alert (img); // index (subscript array) create a saved image path var index = 0 ; // with the innerHTML < p> adding a prompt statement var info = document.getElementById ( "info"); function Fun () { info.innerHTML = "Total" + imgArr.length + "Zhang, now are" + (index + 1) + " Zhang" ; } Fun (); // Create event handler for the two buttons. = pre.onclick function () { // Alert ( "Previous"); // switch to an index decrement index the ; // Analyzing the image to cycle, to prevent super-sector IF (index < 0 ) { index =-imgArr.length. 1 ; } img.src = imgArr [index]; Fun (); // call the function change <p> content } next.onclick =function () { // Alert ( "next"); // switch to an index decrement index ++ ; IF (index>-imgArr.length. 1 ) { index = 0 ; } img.src = imgArr [ index]; Fun (); } </ Script> </ HTML>