Question

我正在尝试构建一个顺序显示一系列图像的动画，但是使用removeChild命令遇到了麻烦，似乎无法弄清楚如何在下一个图像出现之前停止显示图像。我不能使用jQuery，因为这段代码将与Qualtrics接口，而Qualtrics没有jQuery。它下面的代码，你也可以访问它的JSFiddle here。我绝对是初学者，任何帮助都将非常感激！

<table style="width:270px;border:1px solid grey;table-layout:fixed;">
    <tr>
        <td>
            <div class="topRight">12:30pm</div>
            <div class="topLeft">Firstl line, this is long line and needs to show eclipise</div>
            <div class="botRight"><img height='16' width='16' src='http://s12.postimg.org/jbo7bw449/test.png'/></div>
            <div class="botLeft">Second line also long and needs to show eclipise</div>
        </td>
    </tr>
</table>

Answer 1

试试这个：

                    var imageLinks=["http://i.imgur.com/iUjHm4e.jpg",
                    "http://i.imgur.com/89Bh81C.jpg",
                    "http://i.imgur.com/qKecE0F.jpg",
                    "http://i.imgur.com/s5LzrE1.jpg",
                    "http://i.imgur.com/thRmkE8.jpg",
                    "http://i.imgur.com/mjfqeKv.jpg",
                    "http://i.imgur.com/w9EpXNq.jpg",
                    "http://i.imgur.com/b2rP5RQ.jpg",
                    "http://i.imgur.com/NDLm5QQ.jpg",
                    "http://i.imgur.com/7nohNKf.jpg",
                    "http://i.imgur.com/4Qtz8KB.jpg",
                    "http://i.imgur.com/xTwSsBe.jpg",
                    "http://i.imgur.com/KwXNQjR.jpg",
                    "http://i.imgur.com/5BVvvci.jpg",
                    "http://i.imgur.com/bU0jnnD.jpg",
                    "http://i.imgur.com/YKy6K6u.jpg",
            ];
            function display(src)
            {
                    var img=document.createElement("img");
                    img.src=src;
                    document.body.appendChild(img);
                    return img;
            }
            function remove(img)
            {
                    document.body.removeChild(img);
            }
            var i=0;
            function animation_loop()
            {
                    var img=display(imageLinks[i]);
                    setTimeout(function()
                    {
                            i++;
                            if(i < imageLinks.length)
                            {
                                    animation_loop();
                                    remove(img);
                            }
                    }, 5000);
            }
            animation_loop();

在Display函数中创建后，需要返回DOM对象以在remove方法中使用。我在重新执行animation_loop-self函数后执行了remove方法来理解执行流程。

Answer 2

您将字符串从imageLinks传递到remove方法

您需要存储在display()中创建的图片并将其删除。你差不多完成了这里的工作代码：

function animation_loop() {
    im = display(imageLinks[i]);
    setTimeout(function () {
        i++;
        if (i < imageLinks.length) {
            animation_loop();
        }
    }, 50);
    remove(im);
};

removeChild函数不使用setTimeout函数

2 个答案: