しばらくして同じクラスのdivを変更するには？

Question

私が望むのは、advertise_containerを30秒ごとに変更し、foreachから別のものを表示することです。どのように私はそれを行うことができますどのような提案？スクリプトで

<div id="advertise_holder"> 

     @foreach($advertises as $advertise) 
     <div class="row advertise_container"> 
      <div class="col-md-12 col-sm-12 col-xs-12"> 
       <div class="advertisement"> 
       <img src="{{ home_asset('img/advertisment1.png') }}" alt="" /> 
        <div class="advertisment_text"> 
        <div class="advertisement_title">Your ad can be here</div> 
        <div class="advertisment_subtitle">ADVERTISE WITH SKYMO</div> 
        </div> 
        </div> 
        </div> 
       </div> 
      @endforeach 
      </div> 

私がeach機能を使用する必要があることを知っている：

$(".advertise_container").each(function(index) { 

    }); 

今、それは3つのdivを表示します。私が望むのはスライダーのようなものを作ることです。最初のdivを示し、第2および第ようにいくつかの時間後に...この

Answer 1

このコードを試してみてください： 次advrtを表示する関数を作成します。：ドキュメント上の

function showNext(){ 
var next=$('.advertise_container.active').next('.advertise_container'); 
if(!next.length) { 
    next=$('.advertise_container').first(); 
} 
$('.advertise_container.active').fadeOut('slow',function(){ 
    $(this).removeClass('active'); 
    next.fadeIn('slow').addClass('active'); 
    }); 
} 

を表示する第一2秒後に準備ができて、その後、他：

$(function(){ 

//add active class to first el 
    $('.advertise_container.active').first().addClass('active'); 


//show first time 
    showNext(); 

    //show next after 2 seconds (you can change time) 
    setInterval(showNext,2000); 
}); 

追加このCSSクラスも同様：

.advertise_container { 
    display:none; 
} 

Demo

Answer 2

テスト、

しかし、あなたが交換する単一のdivを持っている場合、

if ($(".advertise_container").next().length > 0){ 
      $(".advertise_container"). 
removeClass("advertise_container"). 
next().addClass('advertise_container'); 
    } 

をより効率的になります使用してください。

V.