1

我目前正在开发一个简单的网站，并且正在尝试设置一个简单的幻灯片放映，该幻灯片从一个图像淡入到另一个图像。我目前设置它的方式将使用 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：淡入淡出动态加载的内容有什么解决方法吗？

4

2 回答 2

2

在这里试试我的演示：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/

于 2013-01-30T01:50:38.173 回答
0

您并没有以非常 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');
    });
}
于 2013-01-30T01:50:31.810 回答