Javascript变量未定义图像数组 var myPics=新数组[3]； myPics[0]=“/img/blue.png”； myPics[1]=“/img/red.png”； myPics[2]=“/img/yellow.png”； var计数器=0；函数preImg（）{ 警报（计数器）；如果（计数器==0）计数器=4；计数器--；警报（计数器）； document.getElementById（“coloredImg”）.src=myPics[counter]； } 函数nextImg（）{ 如果（计数器==3）计数器=-1；计数器++； document.getElementById（“coloredImg”）.src=myPics[counter]； }_Javascript_Html_Variables

Javascript变量未定义图像数组 var myPics=新数组[3]； myPics[0]=“/img/blue.png”； myPics[1]=“/img/red.png”； myPics[2]=“/img/yellow.png”； var计数器=0；函数preImg（）{ 警报（计数器）；如果（计数器==0）计数器=4；计数器--；警报（计数器）； document.getElementById（“coloredImg”）.src=myPics[counter]； } 函数nextImg（）{ 如果（计数器==3）计数器=-1；计数器++； document.getElementById（“coloredImg”）.src=myPics[counter]； }

javascript html variables

Javascript变量未定义图像数组 var myPics=新数组[3]； myPics[0]=“/img/blue.png”； myPics[1]=“/img/red.png”； myPics[2]=“/img/yellow.png”； var计数器=0；函数preImg（）{ 警报（计数器）；如果（计数器==0）计数器=4；计数器--；警报（计数器）； document.getElementById（“coloredImg”）.src=myPics[counter]； } 函数nextImg（）{ 如果（计数器==3）计数器=-1；计数器++； document.getElementById（“coloredImg”）.src=myPics[counter]； },javascript,html,variables,Javascript,Html,Variables,我遇到的问题是，我的计数器变量在函数中未定义。例如，当我调用函数preImg时，它会用undefined（当它应该只有0）向我发出警报，而第二个警报会在它应该是3时显示NaN。为什么我的函数不能识别我的“var计数器”，它是全局的，不是吗？您认为变量mypics也会发生同样的情况吗。谢谢 <html> <head> <title>Array of images</title> <script type="text/javasc

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

<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>

应该是

new Array[3];

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

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

[]

是创建阵列的一种简单、快捷的方法

数组

构造函数可以被重写，而像这样的语法构造不能被重写

在代码中更容易发现，从而使调试更容易

它能够获取单个元素（即

[5]

），而不将其解释为数组的长度，这是笨重的

数组

构造函数的常见问题

var myPics=新数组[3]应该是var myPics=新数组（3）
jsiddle:
简单的幻灯片对象，在元素
、图片
和计数器
上使用闭包：
var myPics = [];

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

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

闭包确保定义函数时作用域中的每个变量在调用（或再次调用）函数时仍在作用域中。这个标准JavaScript技术优雅地解决了计数器的问题
使用基于模数的计算允许计数器重复序列0,1,2
（在本例中）

编辑：假设您希望每三秒切换到一个新图像：
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

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

setInterval(show.nextImg, 3000);