多个幻灯片divs一次

我已经创建了一个简单的淡入淡出效果的内容工作正常。但是当我尝试显示具有相同淡入淡出效果的多个div时，它不会同时显示所有div。多个幻灯片divs一次

第二个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();

DEMO

来源

2013-05-31 Sowmya

您需要遍历每个'inner_div'容器以一次达到多个幻灯片效果。检查下面的答案。 –

美好的一天。此代码使每个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();

如果你想永久循环它，只要chek eq参数多于inner_detail元素中的div计数即可。如果需要，将其设置回零。

希望它有帮助。

来源

2013-05-31 07:19:13 user2160696

从您的演示小提琴中，很明显有多个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。

来源

2013-05-31 08:03:59

$(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(); 
});});

来源

2013-05-31 08:39:39

多个幻灯片divs一次

回答

相关问题