使用jquery和Javascript每秒更改img src

我一直在嘗試編寫一個腳本，每兩秒鐘基於一個列表更改圖像src。使用jquery和Javascript每秒更改img 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的。非常感謝你的幫助。

來源

2014-09-04 alejoss

此代碼將在2秒後同時更改所有圖像。你需要每隔兩秒鐘拍攝一張新照片嗎？ – patricK 2014-09-04 16:31:28

是的，爲什麼？我不明白爲什麼它會同時更改所有圖像。 – alejoss 2014-09-04 17:00:12

這是因爲在最後一個循環結束時它將更新var src_img，並且在所有超時將使用src_img的最後一個值執行 – patricK 2014-09-04 17:15:37

你不需要在這種情況下運行的週期，你只保存「指針」 - curentImage並通過函數調用next數組項有史以來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)

來源

2014-09-04 16:33:03 shershen

你需要像這樣

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

來源

2014-09-04 16:34:29 patricK

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：比上一個更好，檢查裏德長度，並從第一個開始，如果你達到目的。

來源

2014-09-04 16:42:41

使用jquery和Javascript每秒更改img src

回答

相關問題