Question

我想要的是每隔30秒改变一次advertise_container并从foreach中显示另一个。{1}}。任何建议我怎么能这样做？

 <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，并在一段时间后显示第二个等等......

Answer 1

试试这段代码：创建功能以显示下一个建议。：

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');
    }

会更有效率。

诉

一段时间后如何改变同班的div？

2 个答案: