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>效果图
js简单图片切换
原文地址：http://www.cnblogs.com/LCH-M/p/7565391.html