3 
<html>
<head>
    <title>Array of images</title>
    <script type="text/javascript">
        var myPics = new Array[3];
        myPics[0] = "./img/blue.png";
        myPics[1] = "./img/red.png";
        myPics[2] = "./img/yellow.png";
        var counter = 0;

        function preImg(){
        alert(counter);
            if(counter == 0)
                counter = 4;

            counter --;
        alert(counter);
            document.getElementById("coloredImg").src = myPics[counter];
        }

        function nextImg(){
            if(counter == 3)
                counter = -1;

            counter ++;

            document.getElementById("coloredImg").src = myPics[counter];
        }
    </script>
</head>
<body>
    <img src="./img/blue.png" id="coloredImg" alt="Image not found"/>
    <input type="button" onclick="preImg()" value="Previous"/>
    <input type="button" onclick="nextImg()" value="Next"/>
</body>
</html>

我遇到的问题是我的计数器变量在函数内部未定义。例如，当我调用函数 preImg 时，它会警告我未定义（当它应该只是 0 时），而第二个警报在它应该是 3 时显示 NaN。为什么我的函数无法识别我的“var counter”它是全局的不是吗？你认为变量 mypics 也会发生同样的情况吗？谢谢！

4

3 回答 3

8 
new Array[3];

应该

new Array(3);

而是使用方括号表示法创建一个数组（也不需要指定长度）：

var myPics = [];

您可能会问为什么要使用这种语法？原因有很多：

  1. []是一种更快更短的创建数组的方法。
  2. 构造Array函数可以被覆盖，而像这样的句法构造则不能。
  3. 在代码中更容易发现，使调试更容易。
  4. 它能够获取单个元素（即[5]）而不将其解释为数组的长度，这是繁琐Array构造函数的常见问题。
于 2012-12-22T15:06:38.573 回答
4

var myPics = new Array[3];应该var myPics = new Array(3);

JsFiddle：http: //jsfiddle.net/cbJAc/

于 2012-12-22T15:06:42.057 回答
3

element在,pics和上使用闭包的简单幻灯片对象counter：

function Slideshow(element, pics) {
    var counter = 0;

    this.nextImg = function () {
        element.src = pics[counter];
        counter = (counter + 1) % pics.length;
    }
    this.nextImg(); // init
}

用法：

var show = new Slideshow(
    document.getElementById("coloredImg"),
    ["./img/blue.png", "./img/red.png", "./img/yellow.png"]
);

show.nextImg(); // red
show.nextImg(); // yellow
show.nextImg(); // blue

闭包确保定义函数时在范围内的每个变量在调用（或再次调用）函数时仍然在范围内。这种标准的 JavaScript 技术可以优雅地解决您的counter问题。

使用基于模数的计算让计数器重复序列0,1,2（在本例中）。

编辑：假设您希望每三秒切换一次新图像：

setInterval(show.nextImg, 3000);
于 2012-12-22T15:15:16.587 回答