Js：ループスルー配列indefinetly

Question

ショートストーリーイメージの配列から4秒ごとにイメージを変更したい。これを実現するためにここに追加する必要があるのは何か。

var list = ["img1", "img2", "img3"]; 

function ChangeBackground() { 
    document.getElementById('background').src = "images/"+list[i]; 
} 

window.setInterval(ChangeBackground(), 4000); 

Answer 1

インデックス上にクロージャを使用できます。

function changeBackground() { 
 
    var i = 0, 
 
     imgURL = 'http://lorempixel.com/250/200/abstract/'; 
 
    return function() { 
 
     document.getElementById('background').src = imgURL + list[i++]; 
 
     i %= list.length; // prevent looping over the length 
 
    }; 
 
} 
 

 
var list = [3, 1, 4, 7]; 
 

 
setInterval(changeBackground(), 4000); 
 
//       ^^   with brackets for returning function

<img id="background">

Answer 2

試してみてください。これは、名前空間を汚染しないこと

var list = ["img1", "img2", "img3"]; 
var i=0; 
function ChangeBackground() { 
    i++; 
    if(i>list.length-1){ 
     i=0; 
    } 
    document.getElementById('background').src = "images/"+list[i]; 
} 

window.setInterval(ChangeBackground(), 4000); 

注意。

Answer 3

var list = ["img1", "img2", "img3"], 
    i = 0;               // declare and initialize i outside of the function 

function ChangeBackground() { 
    document.getElementById('background').src = "images/" + list[i]; 
    i = (i + 1) % list.length;          // increment i after each call to this function (make sure i come back to 0 if it exceeds the length of the array using the modulo % operator) 
} 

window.setInterval(ChangeBackground, 4000);       // pass a reference to the function not its return value (notice there is no parens after the function name)