1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 6 <title> 7 8 </title> 9 10 </head> 11 <style> 12 #zp img{ 13 margin:0 auto; 14 } 15 </style> 16 <body> 17 <div id="zp"> 18 <img src="iamges/46.png" width="300" height="200" id="img1"/> 19 </div> 20 21 <input type="button" value="上一张" onclick="sz()"/> 22 23 <input type="button" value="下一张" onclick="xz()"/> 24 </body> 25 26 <script type="text/javascript"> 27 var picArr=new Array("iamges/46.png","iamges/47.png","iamges/48.png","iamges/49.png","iamges/50.png"); 28 29 var xp=0; 30 31 function sz(){ 32 33 xp++; 34 if(xp==picArr.length){ 35 xp=0; 36 } 37 document.getElementById("img1").src=picArr[xp]; 38 } 39 40 function xz(){ 41 xp--; 42 if(xp<0){ 43 xp=picArr.length-1; 44 } 45 document.getElementById("img1").src=picArr[xp]; 46 } 47 </script> 48 </html>
效果图
原文：http://www.cnblogs.com/LCH-M/p/7565391.html
