如何设置图像数组并单独循环浏览它们

How to set up an array of images and loop through them individually

本文关键字：单独 循环 浏览 数组 图像 何设置 设置      更新时间：2023-09-26

对于更有经验的javascript的人来说，这可能是相当简单的任务。 我想有一个图像数组，然后循环浏览它们以显示每个图像，每个图像之间有一定的时间间隔。

  1. 将图像存储在数组中：var anArray = [image1， image2， image] (我可以通过简单地将图像的 src 放入这样的数组中来将图像放入数组中吗？ 当我尝试时，它像对待一根绳子一样对待每一个。
  2. 创建一个循环来遍历数组中的每个图像并淡入淡出每个图像：for (var i = 0; i <= array.length; i++( 但我不希望它一次在所有图像中淡入淡出，我想要一次一个。
  3. 设置时间间隔： setInterval(functioin(( {}， 1000(; 这样每个图像在彼此之后显示 1 秒或多少秒。

我知道我可以使用插件，但我正在尝试学习 javascript，所以我想避免走捷径(当然除了在这里寻求帮助的快捷方式！

谢谢

var img;
for(length)
{
  img[i]=new Image();
  img[i].src="src";
}

用于将图像存储为数组

var count=0;
var timerid = setInterval(function()
{
   //fade in image
   count++;
   if(count > length)clearInterval(timerId); 
}, 1000);

更好的选择是将所有图像添加到 image.onload 上的 DOM 中，并带有 display：none 标签，然后使用循环逐个淡入图像，

另一种选择是对计数器使用闭包。计数器最优雅地实现为闭包。

// Wrapping the code in a self envoking function prevents polluting the global namespace.
(function() {
    // The images array.
    var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
    // The counter function using a closure.
    var add = (function() {
        // Setting the counter to the last image so it will start with the first image in the array.
        var counter = images.length - 1;
        return function() {
            // When the last image is shown reset the counter else increment the counter.
            if(counter === images.length - 1) {
                counter = 0;
            } else {
                counter+=1;
            }
            return counter;
        }
    })();
    // The function for changing the images.
    setInterval(
        function() {
            console.log(images[add()]);
        }
    , 1000);
})();
相关文章：