<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #main{ 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 type="text/javascript"> //获取按钮name元素 var pre=document.getElementById("pre"); var next=document.getElementById("next"); //创建一个数组来保存图片路径,切换图片就是切换图片路径 var imgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"]; //获取img元素,赋予img为数组元素 var img=document.getElementsByTagName("img")[0]; //alert(img); //创建保存图片路径的索引(数组下标) var index=0; //用innerHTML向<p>添加提示语句 var info=document.getElementById("info"); function fun(){ info.innerHTML="总共 "+ imgArr.length + " 张,现在是第 "+(index+1)+" 张"; } fun(); //.为两个按钮创建事件处理函数 pre.onclick=function(){ //alert("上一张"); //切换到上一张,索引自减 index--; //判断,使图片循环切换,防止超界 if(index<0){ index=imgArr.length-1; } img.src=imgArr[index]; fun();//调用函数改变<p>内容 } next.onclick=function(){ //alert("下一张"); //切换到上一张,索引自减 index++; if(index>imgArr.length-1){ index=0; } img.src=imgArr[index]; fun(); } </script> </html>