如何使用 javascript 循环和数组显示图像幻灯片？答案

【问题标题】：how to display images slide show using javascript loop and array?如何使用 javascript 循环和数组显示图像幻灯片？
【发布时间】：2019-10-19 04:20:50
【问题描述】：

程序运行时，屏幕上只显示最后一个数组值图像，其他图像不显示。

这是 HTML 代码

<img id="mg" alt="image not found">

这里是javascript代码

var images=["image", "image2","img","imag"]
test();
function test(){
   var index = 0;
   for(var count=0; count<images.length; count++){
       document.getElementById('mg').src = images[count] + ".jpg";
       document.getElementById("mg").width = "500";
       document.getElementById("mg").height = "300";
       index = index + 1;
       setTimeout(test, 1000);
       if(index + 1 > images.length){
            index = 0;
            count = 0;
    }
   }
}

【问题讨论】：

为什么不使用 CSS 来代替呢？这与这个问题/答案非常相似：stackoverflow.com/a/58177780/362536
我正在学习在 javascript 中使用它

标签： javascript html css

【解决方案1】：

function test(){
   var index = 0;
   for(var count=0; count<images.length; count++){
       ...
       setTimeout(test, 1000);
       ...
   }
}

setTimeout() 这里并没有按照你的想法做。它不会在继续之前引入延迟。它实际上告诉引擎在您的代码继续运行时自行关闭并计算 1,000 毫秒。

换句话说，您几乎同时调用setTimeout() 来获取循环的长度。

我会采取不同的做法：

const imageUrls = [
  'first.jpg',
  'second.jpg',
  'third.jpg',
  'fourth.jpg'
];

const imgEl = document.querySelector('img');
imgEl.src = imageUrls[0];

function advanceImage() {
  imgEl.src = imageUrls[imageUrls.indexOf(imgEl.src) + 1] || imageUrls[0];
}

setInterval(advanceImage, 1000);

在这种情况下，我们将图像初始化为第一个 URL。然后，我们每一秒都计算出当前索引是什么，并在其中添加一个。如果我们到达数组中不存在某些东西的部分，则默认为第一个图像 URL。

理想情况下，您根本不会为此使用任何 JavaScript，而是使用 CSS 来完成，但我想我还是会与您分享这个示例。

【讨论】：

【解决方案2】：

Do you have to use the loop?  If not, try this:

<html>
    <head>
    </head>
    <body>
        <img id="mg" alt="image not found"> 
        <script type="text/javascript">
        var images=["image", "image2","img","imag"]
        test();

        var count = 0;

        function test(){
                console.log("I am executing with count at " + count);

               document.getElementById('mg').src = images[count] + ".jpg";
               document.getElementById("mg").width = "500";
               document.getElementById("mg").height = "300";

               if(count + 1 >= images.length){
                    count = 0;
                }
                else
                {
                    ++count;
                }
        }

        setInterval(test, 1000);

        </script>       
    </body>
</html>

setInterval 将确保该函数每秒被调用一次，并且将计数器移到函数之外意味着它始终可以被访问，并且您始终可以在数组中获取正确的元素。

【讨论】：

第一次运行不显示任何东西，它说找不到图片

【解决方案3】：

您不需要循环播放所有图像，因为您的测试功能一次只需要一张图像。您可以做的是将 currentIndex 存储在函数外部并在每次执行时更新它。这是一个例子：

var images = ["https://api.adorable.io/avatars/100/1", "https://api.adorable.io/avatars/100/2", "https://api.adorable.io/avatars/100/3", "https://api.adorable.io/avatars/100/4"]

var currentImage = 0;

test();

function test() {
  // Update the image
  document.getElementById('mg').src = images[currentImage] + ".jpg";
  document.getElementById("mg").width = "100";
  document.getElementById("mg").height = "100";

  // Update the index for the next tick
  currentImage += 1;
  if (currentImage === images.length) {
    currentImage = 0;
  }

  // Set next tick
  setTimeout(test, 1000);
}

&lt;img id="mg" alt="image not found"&gt;

【讨论】：

第一次运行不显示任何东西，它说找不到图片
@Ishk 这是因为您的 img html 元素上没有 src 属性。所以直到第一张图片加载完毕，alt属性值才会出现