Question

对于有更多javascript经验的人来说，这可能是相当简单的任务。我希望有一个图像阵列，然后循环显示每个图像，每个图像之间有一定的时间间隔。

将图像存储在一个数组中：var anArray = [image1，image2，image]（我可以将图像放入一个数组中，只需将它们放入一个数组中吗？当我尝试将它们视为一个字符串时。）
创建一个循环来遍历数组中的每个图像并淡化每个图像：for（var i = 0; i＆lt; = array.length; i ++）但我不想让它在所有图像中淡出我立刻想要一个图像。
设置时间间隔：setInterval（functioin（）{}，1000）;这样每张图像会显示1秒钟或者相隔很多秒钟。

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

由于

Answer 1

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);

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

Answer 2

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

// 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);

})();

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

2 个答案: