Question

我目前正在开发一个简单的网站，我正在尝试设置一个简单的幻灯片，从一个图像淡化到另一个图像。我现在设置的方式是使用JQuery将文件夹中的所有图像加载到html中（动态）。

我拥有它以获得图像名称列表（通过php），然后只为每个图像添加html（图像只是每个图像名称的数组）：

for(var i = 0; i < images.length; i++) {
    $('#slideshow').append('<img id="\"slide' + i + '\"" src="animations/' + images[i] + '" style=\"display: none;\"/>');
}

然后它调用这个方法，它应该开始（并继续）循环它们。我在没有动态加载的图像的情况下工作，但看到你不能使用.css或.fadeIn和动态内容我被卡住了

function countDown() {
    setTimeout(countDown, 4000);
    lastSlideNum = count;
    count++;
    if(count > images.length)
        count = 0;
    currentSlideNum = count;

    //This next part never gets called  because it can't access the dynamically created img
    $("#slide" + lastSlideNum).fadeOut('slow', function() { 
        $(this).css("display", "none");
        $("#slide" + currentSlideNum).fadeIn('slow');
    });
}

我意识到它可能不是很漂亮或最简单的做事方式，但对此的任何建议都会有很大帮助。请记住，我对JQuery很新，所以如果有更简单的方法，请告诉我。

TL; DR：有关淡入淡出动态加载内容的任何工作吗？

Answer 1

在此处试用我的演示：http://jsfiddle.net/QAa7a/

这个想法是使用$（“＃slideshow img：nth-child（”+ lastSlideNum +“）”）来查询：

function countDown() {
    setTimeout(countDown, 4000);
    lastSlideNum = count + 1;
    count++;
    if(count >= images.length)
        count = 0;
    currentSlideNum = count + 1;

    //This next part never gets called  because it can't access the dynamically created img
    console.log(lastSlideNum + "?" + $("#slide" + lastSlideNum).length);
    $("#slideshow img:nth-child(" + lastSlideNum + ")").fadeOut('slow', function() { 
        $(this).css("display", "none");
        $("#slideshow img:nth-child(" + currentSlideNum + ")").fadeIn('slow');
    });
}

如果您不熟悉nth-child选择器，请检查此链接：http://api.jquery.com/nth-child-selector/

Answer 2

你没有以非常jQuery的方式处理所有索引号等等。你可以在这里大大简化。没有理由不能使用jQuery访问已动态添加到DOM的元素。

for(var i = 0; i < images.length; i++) {
    $('#slideshow').append('<img class="rotating_image" src="animations/' + images[i] + '" style="display: none;"/>');
}

var slide_interval = 4000;
continue = true;
while (continue === true) {
    $('.rotating_image').each( function() {
        $(this).fadeIn('slow').delay(slide_interval).fadeOut('slow');
    });
}

在JQuery中淡化动态加载的内容

2 个答案: