Loop корыто массива изображений

Question

Я пытаюсь Переберите корыта массива изображений, но не может пройти изображение 2.

Массив должен также цикл обратно в 1, когда прошел последнее изображение .. .

var WorkArray = new Array('work/01.png', 'work/02.png', 'work/03.png', 'work/04.png'); 

var nelements = WorkArray.length; 

preload_image_object = new Image(); 
    var i = 0; 
    for(i=0; i<=nelements; i++) { 
    preload_image_object.src = WorkArray[i]; 
    } 

function cC() { 
    var nelements = WorkArray.length; 
    var i = 0; 
    for(i=0; i<=nelements; i++) { 
    nelements = WorkArray[i]; 
    } 
    document.getElementById("work").style.backgroundImage="url('"+WorkArray[i]+"')"; 
    } 

Спасибо!

Answer 1

Вы можете сохранить текущий файл и использовать по модулю для работы в циклическом порядке.

Это будет выглядеть примерно так:

var WorkArray = new Array('work/01.png', 'work/02.png', 'work/03.png', 'work/04.png'); 
var currentImage = 0 

function nextImage(){ 
currentImage = (currentImage + 1) % WorkArray.length; 
document.getElementById("work").style.backgroundImage="url('"+WorkArray[currentImage]+"')"; 
} 

Answer 2

Вы перезапись nelements с текущим элементом цикла:

nelements = WorkArray[i]; 

Answer 3

Следующие должно исправить свою петлю:

var WorkArray = new Array('work/01.png', 'work/02.png', 'work/03.png', 'work/04.png'); 
var preload_image_object = new Image(); 

/* Lets get rid of `nelements`, as its just confusing. Get the length here. 
* If, for performace reasons you want to use elements, the best way is to reverse 
* aka for(var i = WorkArray.length-1; i >= 0 ; i--) 
* Also, its simpler to declare the var in your for-loop itself instead of outside of it. 
*/ 
for(var i = 0; i <= WorkArray.length; i++){ 
    preload_image_object.src = WorkArray[i]; 
} 

Кроме того, опять ради упрощения, ваше применение фона изображения может быть сделаны внутри ваш цикл петли также может быть сделан, чтобы выглядеть более чистым с некоторыми пробелами и опуская ' внутри вашего url():

document.getElementById("work").style.backgroundImage = "url(" + WorkArray[i] + ")";