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

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

1 个答案: