javascript - 5 秒后将图像 1 替换为图像 2

Question

我找到了这个脚本。但我想显示另一张图像而不是文本“SOME TEXT”。

$(document).ready(function()
    {
        setTimeout(function()
        {
            $("div#outer").fadeOut("slow", function ()
            {
                $("div#outer img").remove();                
                $("div#outer").html($("div#text").text());
                $("div#outer").show();
            });
         }, 5000);
     });

<div id="outer"><img src="http://existdissolve.com/wp-content/uploads/2010/08/microsoft-logo-64x64.png" alt="" /></div>
<div id="text" style="display:none">SOME TEXT</div>

Answer 1

您可以更改图像源或删除图像并使用某些动态 ID 或其他内容创建一个新图像。

这是一个js fiddle :https://jsfiddle.net/s57qok3n/ .

HTML:

<div id="outer"><img src="http://existdissolve.com/wp-content/uploads/2010/08/microsoft-logo-64x64.png" alt="" /></div>

JS:

$(document).ready(function()
    {
        setTimeout(function()
        {
            $("div#outer").fadeOut("slow", function ()
            {
                $("div#outer img").remove();                
                var img = $('<img id="dynamic">'); //Equivalent: var img = $(document.createElement('img'))
                img.attr('src', 'http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg');
                img.appendTo('div#outer');
                $("div#outer").show();
            });
         }, 5000);
     });

如果您只想更改 src 属性，请执行以下操作:

$(document).ready(function () {
    setTimeout(function () {
        $("div#outer").fadeOut("slow", function () {
            $("div#outer img").prop('src', 'http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg');
            $("div#outer").show();
        });
    }, 5000);
});

工作 js fiddle :https://jsfiddle.net/4faco2d9/