如何在一段時間後改變同一類的div？

我想要的是每30秒更改一次advertise_container，並顯示另一個來自foreach。任何建議我該怎麼做？如何在一段時間後改變同一類的div？

<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中，並在一段時間第二等後...

來源

2017-03-08 None

請更具體的關於你問題 –

我更新了我的問題... – None

試試這個代碼：創建功能2秒後，顯示下一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'); 
    }); 
}

顯示1：

$(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

來源

2017-03-08 11:09:06

問題是，我foreach，我不能首先添加活動類，然後它所有的div都會有那個類 – None

好吧，我想出來...... tnx – None

@沒有那麼好。我也更新了答案 –

測試此，

但如果你有一個div來替代，使用

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

會更有效率。

五

來源

2017-03-08 10:51:56

也許你不明白我。我顯示幾個div，我想只顯示第一次和一段時間後，我想顯示第二個div ...等等... – None

哦對不起，我會更新我的答案 –

如何在一段時間後改變同一類的div？

回答

相關問題