如何迭代地向 HTML 元素添加和删除图像？

Question

我正在创建一个带有不断变化的背景图像的简单网页，但不确定如何达到预期的效果。

在我的标签中，我创建了一组图像（更准确地说是文件路径）。我已经通过 id 检索了 DOM 元素。我已经编写了一个 for 循环，它应该遍历上述数组。循环应该：

• 1 - 创建一个新的“img”元素
• 2 - 将其 src 设置为当前数组项（同样是文件路径）
• 3 - 将这个新创建的图像附加到检索到的 DOM 元素中
• 4 - 然后，在本次迭代完成时，应删除“img”元素

以下是嵌入在 HTML 文档中的 JS 代码...

<script type="text/javascript">
  $(document).ready(function () {

        var image_array= [
        "static/arch.jpg",
        "static/pasture.jpg",
        "static/starry_night.jpg",
        "static/arturo.jpg",
        "static/desert.jpg",
        "static/jedi.jpg",
        "static/kylo.jpg",
        "static/trooper.jpg"
        ]

    var background = document.getElementById('cur_background');

        for (var i = 0, j = image_array.length; i < j; i++) {
            var img = document.createElement('img');
            img.src = image_array[i]; 
            background.appendChild(img);
                setTimeout(function() {
                    $('img').remove();
                }, 5000);
        }

    });

将出现图像的 HTML 元素写在下面...

    <div class="middle">
        <ul class="middle_background">
            <li id= "cur_background"></li>
            <!-- <li id="1"><img src="static/arch.jpg"></li>
            <li id="2"><img src="static/pasture.jpg"></li>
            <li id="3"><img src="static/starry_night.jpg"></li>
            <li id="4"><img src="static/arturo.jpg"></li>
            <li id="5"><img src="static/desert.jpg"></li>
            <li id="6"><img src="static/jedi.jpg"></li>
            <li id="7"><img src="static/kylo.jpg"></li>
            <li id="8"><img src="static/trooper.jpg"></li> -->
        </ul>
        <h2>And so the story begins...</h2>
    </div>

我预计会发生什么：

循环遍历图像数组，创建一个临时的“img”元素，它会出现在其中，然后在到达特定循环迭代结束时删除“img”元素。

实际发生的情况：

所有图像一次加载，以列表格式显示在正确的 DOM 元素（'cur-background'）中，然后在 setTimeout 间隔激活时集体消失。

Answer 1

var $background = $('#cur_background');

function loopBackgroundImages ( nextIndex ) {
  // create an image tag
  var $img = $('<img>').attr('src', image_array[nextIndex]);

  // append it to the background
  $background.append($img);

  setTimeout(function(){
    // after 5 seconds, remove the image and iterate to the next loop
    // you can use modulus (%) to cause the index to wrap back to 0
    $img.remove();
    loopBackgroundImages( ++nextIndex % image_array.length );
  }, 5000);
}

// start the loop at index 0
loopBackgroundImages(0);