<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0px; padding: 0px; } #outer{ width: 240px; margin: 50px auto; background-color: greenyellow; padding: 10px; text-align: center; } img{ width: 240px; } </style> <script type="text/javascript"> window.οnlοad=function(){var img=document.getElementsByTagName("img")[0];
var imgArr=["img/cat.jpg","img/flower.jpg","img/san.jpg"]; var n=0; var info=document.getElementById("info"); info.innerHTML="一共"+imgArr.length+"张，这是第"+(n+1)+"张！" //获取两个按钮 var prev=document.getElementById("prev"); var next=document.getElementById("next");//为两个按钮绑定事件
prev.οnclick=function(){ n--; if (n<0) {n=imgArr.length-1;} img.src=imgArr[n]; info.innerHTML="一共"+imgArr.length+"张，这是第"+(n+1)+"张！" }; next.οnclick=function(){ n++; if (n>imgArr.length-1) {n=0;} img.src=imgArr[n]; info.innerHTML="一共"+imgArr.length+"张，这是第"+(n+1)+"张！" }; } </script></head><body> <div id="outer"> <p id="info">一共3张，这是第一张！</p> <img src="img/cat.jpg" alt="猫"> <button id="prev">上一张</button> <button id="next">下一张</button> </div></body></html>