使用jquery动态追加和交叉淡化图像

Question

这就是我现在所拥有的：

<div id="nhs_BasicSearchBox">
    <img src="img1.jpg" />
    <img src="img2.jpg" />
</div>

但我真正想做的是动态添加图片：

<div id="nhs_BasicSearchBox"></div>

这是我的jquery：

$('img').hide();

function animg() {
    $("#nhs_BasicSearchBox img").first().appendTo('#nhs_BasicSearchBox').fadeOut(1500);
    $("#nhs_BasicSearchBox img").first().fadeIn(1500);
    setTimeout(animg, 6000);
}
animg();

我有点失落。有帮助吗？ This is my fiddle。感谢。

Answer 1

您可以创建图像阵列＆＃39;链接，然后使用<img>循环将src这些链接作为for附加到容器：

Fiddle

var imageLinks = ["link1", "link2"];

var container = $("#nhs_BasicSearchBox");
for (var i = 0; i < imageLinks.length; i++)
{
    container.append($('<img>', { src: imageLinks[i] }));
}