Question

我一直在尝试编写一个脚本，根据列表每两秒更改一次图像src。

所以，一切都在for循环中，循环遍历该列表：

$(document).ready(function() {
    var lis = {{dias|safe}}; <----- a long list from django. This part of the code works fine.

    for (i=0; i<lis.length; i++){
        src_img = lis[i][1];
        var timeout = setInterval(function(){
            console.log(src_img)
            $("#imagen").attr("src", src_img);
        }, 2000)
    }
});

它不起作用，控制台记录数千个与列表中最后一项对应的srcs。非常感谢你的帮助。

Answer 1

在这种情况下，你不需要运行循环，只需保存＆＃34;指针＆＃34; - curentImage并通过函数调用下一个数组项2秒

 var curentImage = 0;

 function getNextImg(){
    var url = lis[curentImage];

    if(lis[curentImage]){   
    curentImage++;
    } else {
    curentImage = 0;
    }

    return url;
 }

var timeout = setInterval(function(){
            $("#imagen").attr("src", getNextImg());
        }, 2000)

Answer 2

你需要这样的东西

$(document).ready(function() {
    var index = 0;
    setInterval(function(){
         src_img = lis[index++ % lis.lenght][1]; // avoid arrayOutOfBounds 
         $("#imagen").attr("src", src_img);
    }, 2000)
});

Answer 3

var curentImage = 0;
var length = lis.length;

function NewImage(){
    var url = lis[curentImage];
    if(curentImage < length){
         currentImage++;
    }
   else{
      currentImage = 0;
    }
return url;
}

var timeout = setInterval(function(){
        $("#imagen").attr("src", getNextImg());
}, 2000)

PS：比前一个更好，检查lis长度，如果你到达终点，从第一个开始。

使用Jquery和Javascript每秒更改img src

3 个答案: