通过JavaScript设置按钮功能实现点击按钮切换上一张、下一张图片。（具体实现代码在图片后面）。 浏览器实现效果：
实现代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片切换</title> <style type="text/css"> *{ padding: 0; margin: 0; } #outer{ width: 600px; margin: 50px auto; padding: 10px; background-color: yellow; text-align: center; } img{ width: 600px; height: 400px; } </style> <script type="text/javascript"> //点击按钮切换图片 window.onload=function(){ //获取两个按钮 var prev=document.getElementById("prev"); var next=document.getElementById("next"); var img=document.getElementsByTagName("img")[0]; //创建一个存放图片路径的数组 var imgArr=["http://p3.pstatp.com/large/128000019d1b1202f89a","http://pic2.orsoon.com/2017/0812/20170812085010372.png","http://n2.cmsfile.pg0.cn/group1/M00/2F/2C/Cgqg2FfqX3uAAS9IAAG07tJL3LY484.jpg","https://p3.ssl.qhimgs1.com/sdr/400__/t0148392e406d4f27a3.jpg"]; //创建一个保存当前正在显示图片的索引的变量 var i=0; //设置提示文字 var info=document.getElementById("info"); info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(i+1)+"张"; //分别为两个按钮绑定单击响应函数 prev.onclick=function(){ //通过索引值修改当前显示图片 i--; if(i<0){ i=imgArr.length-1; } img.src=imgArr[i]; info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(i+1)+"张"; }; next.onclick=function(){ //通过索引值修改当前显示图片 i++; if(i>imgArr.length-1){ i=0; } img.src=imgArr[i]; info.innerHTML="一共"+imgArr.length+"张图片，当前第"+(i+1)+"张"; }; }; </script> </head> <body> <div id="outer"> <h1 id="info"></h1> <img src="http://p3.pstatp.com/large/128000019d1b1202f89a" alt="谭松韵"> <button id="prev">上一张</button> <button id="next">下一张</button> </div> </body> </html>