javascript - 使用 Jquery 和 Javascript 每秒更改 img src

Question

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

因此，所有内容都在循环遍历该列表的 forloop 中:

$(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)
    }
});

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

Answer 1

在这种情况下您不需要运行循环，您只需保存“指针”-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)