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

您正在使用循环的当前元素覆盖nelements：

nelements = WorkArray[i];

Answer 2

您可以保存当前文件并使用模数以循环方式运行。

它看起来像那样：

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 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];
}

另外，为简化起见，您的背景图像的应用也可以在for循环中完成，并且可以使用一些空格看起来更干净并省略{{1}内的' }}：

url()

在javascript中循环遍历图像数组

3 个答案: