在 javascript 中循环浏览图像数组

Loop through array of images in javascript

本文关键字：图像 数组 浏览 循环 javascript      更新时间：2023-09-26

>我正在尝试循环浏览图像数组，但似乎无法通过图像 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]+"')";
    }

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

它看起来像这样：

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]+"')";
}

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

nelements = WorkArray[i];

以下内容应该可以修复您的循环：

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 循环中完成，并且可以通过一些空格和省略url()内的'来使其看起来更干净：

document.getElementById("work").style.backgroundImage = "url(" + WorkArray[i] + ")";
相关文章：