Question

我有以下代码，根据图像数组选择背景图像。问题是我有大约200个图像，我希望有更快的方法将所有这些图像放在图像数组中，而不是列出每个图像，就像我当前有六个图像一样。它们的名称非常相似（即image001，image002，... image200），所以如果不知何故，这个数字可以添加到“图像”中。

这会为我节省大量的时间和空间。代码如下。

var images = [
'image0.png',
'image1.png',
'image2.png',
'image3.png',
'image4.png',
'image5.png'
];

$("#container").on("scroll", function(){
var $container = $("#container");
var $content = $("#content");
var totalScrollAmount = $content.height() - $container.height();
var percentScrolled = $container.scrollTop() / totalScrollAmount;
$content.css({
    background:"url("+images[Math.floor(percentScrolled * images.length)]+")"
});
});

Answer 1

var images = [];
for(var i = 0; i < 200; i++)
  images.push("image" + ("000" + i).substr(-3, 3) + ".png");

Answer 2

这是一个写为 IIFE

的生成器

var images = (function (maxlen, arr, i) {
    function pad3(i) { // helper
        return ('000' + i).slice(-3);
    }
    arr || (arr = []); // defaults
    i || (i = 0);
    arr.length = maxlen;
    for (; i < maxlen; ++i) { // do the loop
        arr[i] = 'image' + pad3(i) + '.png';
    }
    return arr;
}(3)); // 3 for 3 items

images; // ["image000.png", "image001.png", "image002.png"]

JavaScript引用具有相似名称的几个图像而不链接到每个图像

2 个答案: