JavaScript之数组切换图片

Posted 静心*尽力

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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时,切换成最后一张图片
大功告成

 



以上是关于JavaScript之数组切换图片的主要内容，如果未能解决你的问题，请参考以下文章
 

 JavaScript之图片操作1


 javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件


 JavaScript之图片操作2


 javascript常用代码片段


 如何将此 JavaScript 代码片段翻译成 Parenscript？


 JavaScript单行代码，也就是代码片段