Javascript 一次多个幻灯片放映div

我为内容创建了一个简单的淡入效果，效果很好。但是当我尝试显示具有相同淡入效果的多个div时，它不会同时显示所有div

第二个div在第一个div完成时启动动画。但我需要同时显示所有内容

function go()
{
    $(".inner_detail").each(function(){
        showNextQuote(this,0);
    });
}

function showNextQuote(inner_div,eq) {
    $(inner_div).find("div").eq(eq).fadeIn(2000)
        .delay(2000)
    .fadeOut(2000,function(){showNextQuote(inner_div,eq*1+1);});

}

go();

下面是我的代码和演示

var quotes = $(".inner_detail div");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();    

你好。 这段代码使每个内部_细节块显示（带有您的效果）一个接一个div。所有内部_细节元素同时执行此操作

function go()
{
    $(".inner_detail").each(function(){
        showNextQuote(this,0);
    });
}

function showNextQuote(inner_div,eq) {
    $(inner_div).find("div").eq(eq).fadeIn(2000)
        .delay(2000)
    .fadeOut(2000,function(){showNextQuote(inner_div,eq*1+1);});

}

go();

若您想永远循环它，只需将eq参数设置为大于internal_detail元素中的div count。如果需要，将其设置回零

---

希望有帮助。

从您的演示小提琴中可以清楚地看到，有多个

内部_div

容器，您的函数一次访问一个容器，因此无法实现多幻灯片。因此，您必须循环遍历每个

内部分区

容器，以一次达到多重幻灯片效果

有许多可能性，下面是一个例子：

$(document).ready(function() {
    $(".inner_detail").each(function(){
        slideQuote(this,0);
    });

    function slideQuote(inner_div,eq) {
        if($(inner_div).find("div").size() == eq) {
            eq = 0;
        }
        $(inner_div).find("div").eq(eq)
        .fadeIn(2000)
        .delay(2000)
        .fadeOut(2000,
                 function(){
                     slideQuote(inner_div,eq+1);
                 }
                );
    }   
}); 

---

检查工作状态。

您需要循环通过每个

内部分区

容器，一次达到多重幻灯片效果。检查下面的答案。