Question

我正在构建自己定制的图片幻灯片，目前这是一段代码：

function slideSwitch() {
    var images = new Array('Aerodynamics.jpg','ABC_news.jpg','yep.jpg');
    var currentImage = 0; 
    var newImage = 'url(images/'+images[currentImage]+')';    
    $('.inner_img').css('background-image',newImage).animate({opacity:1.0},4000,function(){
        if (currentImage != images.length-1){
            currentImage++;
        } else {
            currentImage = 0;
        };
        $(this).animate({opacity:0.0},4000);
    });
};

function interval(){
    setInterval(slideSwitch,1000);
};

interval();

问题是，当interval再次触发slideSwitch（）函数时，变量newImage在第一次触发时保持相同的值。你能告诉我我做错了什么吗？我也尝试在函数外部放置变量，给出相同的结果。

Answer 1

每次调用函数时，

that bc currentImage被赋值为零。

您应该将currentImage放入更大的范围，并在作业slideSwitch

之外进行分配

var currentImage = 0;

function slideSwitch()
{
    //same thing, but lose the line: var currentImage = 0
}

function interval()
{
    //unchanged
}

interval();

顺便说一下，以下一块：

if (currentImage != images.length-1){
     currentImage++;
 }
else{
     currentImage = 0;
 };

可以简化为

currentImage = (currentImage + 1) % images.length;

Answer 2

那是因为每次调用它时都会在方法内重新声明var currentImage = 0;。

使用jQuery的.data() api将其存储在相关的DOM元素中，或者在方法之外声明它

var currentImage = 0; 

function slideSwitch() {
  //code
}

Answer 3

将currentImage拉出slideSwitch函数，它应该可以正常工作。你的间隔在呼唤：

var currentImage = 0;

右边有重置它。

JS中的变量赋值问题，试图理解我的头脑

3 个答案: