JavaScript之数组切换图片

代码示例

<!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时,切换成最后一张图片
大功告成

 







            

            
posted @ 
2019-01-06 00:41 
静心*尽力 
阅读(716) 
评论(0) 
编辑 
收藏 
举报