javascript - 一次多个幻灯片 div

Question

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

当第一个 div 完成时，第二个 div 开始动画。但我需要同时显示所有内容。

这是我的代码和下面的演示

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

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

    showNextQuote();    

演示

Answer 1

$(function(){
    var quotes = $(".inner_detail").get();
    $.each(quotes,function(index,value){
    var quoteIndex = -1;
    function showNextQuote() {
        ++quoteIndex;
        $(quotes[index]).find("div").eq(quoteIndex % quotes.length)
        .fadeIn(2000)
        .delay(2000)
        .fadeOut(2000, showNextQuote);
    }
    showNextQuote();
});});

Answer 2

再会。此代码使每个 inner_detail 块显示（与您的效果） div 一个接一个。所有 inner_detail 元素同时执行此操作。

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 参数大于 inner_detail 元素中的 div 计数。并在需要时将其设置回零。

希望它有所帮助。

Answer 3

从您的演示小提琴中，很明显有多个inner_div容器并且您的函数一次访问它们，因此没有实现多张幻灯片。因此，您必须遍历每个inner_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);
                 }
                );
    }   
}); 

检查工作Demo Fiddle。