代码示例
- <!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 时, 切换成最后一张图片
大功告成
来源: http://www.bubuko.com/infodetail-2910291.html