代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数组切换图片</title> <style type="text/css"> body{ background:#96D5E8; } #box{ width: 500px; height: 420px; margin: 10px auto; position: relative; border:4px solid purple; border-radius: 20px; } #box img{ width: 500px; height: 420px; border-radius: 20px; } #box a{ width: 50px; height: 50px; border:1px solid #1488F6; text-decoration: none; text-align: center; font: 20px/50px "simhei"; border-radius: 4px; position: absolute; top: 50%; margin-top: -25px; } #left{ left: -100px; } #right{ right: -100px; } </style> </head> <body> <div id="box"> <img src="img1.jpg" alt="" id="img"> <a href="#" id="left">< </a> <a href="#" id="right"> > </a> </div> </body> </html> <script type="text/javascript"> var img=document.getElementById('img'); var left=document.getElementById('left'); var right=document.getElementById('right'); var arr=['img1.jpg','img2.jpg','img3.jpg','img4.jpg','img5.jpg','img6.jpg','img7.jpg',]; var num=0; right.onclick=function(){ num+=1; if(num==arr.length){ num=0; } img.src=arr[num]; }; left.onclick=function(){ num--; if( num == -1){ num = arr.length -1; } img.src=arr[num]; } </script>
最重要的一部分
left.onclick=function(){
num--;
if( num == -1){
num = arr.length -1;
}
img.src=arr[num];
}
如果先右击一次,此时下标为1,再点击左边,num--=0;这时候初始图片也能显示,再左击一次为负数,等于-1时,切换成最后一张图片
大功告成
