Как скрыть класс DIV в контейнере и как другой div в одном контейнере? Использование jQuery

Question

У меня есть класс DIV, который составляет около 10 в контейнере. Я хочу скрыть и показать их один за другим через каждые 15 секунд с хорошим fadeOut() или отскоком. Я думаю, что угасание будет в порядке. Помогите с использованием jQuery.

мой HTML-код:

<h1 class="advert"> Spsonsord Links</h1> 
<div class="advertcont"> 
<img src="images/advertimage/lap.png" class="advertimg"> 
<p class="adverttext">Get the Best Shoes at 30GHS.</p> 
<a class="advertlink" href="#">www.shoes.com</a> 

</div> <!--end of div clas "ADVERTCONT"--> 
<div class="advertcont"> 
<img src="images/advertimage/lap.png" class="advertimg"> 
<p class="adverttext">Get the Best Shoes at 30GHS.</p> 
<a class="advertlink" href="#">www.shoes.com</a> 

</div> <!--end of div clas "ADVERTCONT"--> 
<div class="advertcont"> 
<img src="images/advertimage/lap.png" class="advertimg"> 
<p class="adverttext">Get the Best Shoes at 30GHS.</p> 
<a class="advertlink" href="#">www.shoes.com</a> 

</div> <!--end of div clas "ADVERTCONT"--> 
<div class="advertcont"> 
<img src="images/advertimage/lap.png" class="advertimg"> 
<p class="adverttext">Get the Best Shoes at 30GHS.</p> 
<a class="advertlink" href="#">www.shoes.com</a> 

</div> <!--end of div clas "ADVERTCONT"--> 
<div class="advertcont"> 
<img src="images/advertimage/lap.png" class="advertimg"> 
<p class="adverttext">Get the Best Shoes at 30GHS.</p> 
<a class="advertlink" href="#">www.shoes.com</a> 

</div> <!--end of div clas "ADVERTCONT"--> 

</div><!--end of div clas "CONTAINER"--> 

Answer 1

Вы можете иметь счетчик установлен на 0 и приращения функции и показать divs и использовать setTimeout для вызова функции повторно.

var ctr = 0; 
 

 
$(document).ready(function(){ 
 
    showElem(); 
 
}); 
 

 
function showElem() { 
 
    var length = $('.advertcont').length; 
 
    $('.advertcont').hide(); 
 
    $('.advertcont').eq(ctr).fadeIn(900); 
 
    (ctr >= (length-1)) ? ctr = 0: ctr++; 
 
    setTimeout(showElem, 1000); //make it 15000. Have used 1000 for the demo 
 
}

.advertcont {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 class="advert"> Spsonsord Links</h1> 
 
<div class="advertcont"> 
 
<img src="images/advertimage/lap.png" class="advertimg"> 
 
<p class="adverttext">Get the Best Shoes at 30GHS.</p> 
 
<a class="advertlink" href="#">www.shoes.com</a> 
 

 
</div> <!--end of div clas "ADVERTCONT"--> 
 
<div class="advertcont"> 
 
<img src="images/advertimage/lap.png" class="advertimg"> 
 
<p class="adverttext">Get the Best Shoes at 30GHS.</p> 
 
<a class="advertlink" href="#">www.shoes.com</a> 
 

 
</div> <!--end of div clas "ADVERTCONT"--> 
 
<div class="advertcont"> 
 
<img src="images/advertimage/lap.png" class="advertimg"> 
 
<p class="adverttext">Get the Best Shoes at 30GHS.</p> 
 
<a class="advertlink" href="#">www.shoes.com</a> 
 

 
</div> <!--end of div clas "ADVERTCONT"--> 
 
<div class="advertcont"> 
 
<img src="images/advertimage/lap.png" class="advertimg"> 
 
<p class="adverttext">Get the Best Shoes at 30GHS.</p> 
 
<a class="advertlink" href="#">www.shoes.com</a> 
 

 
</div> <!--end of div clas "ADVERTCONT"--> 
 
<div class="advertcont"> 
 
<img src="images/advertimage/lap.png" class="advertimg"> 
 
<p class="adverttext">Get the Best Shoes at 30GHS.</p> 
 
<a class="advertlink" href="#">www.shoes.com</a> 
 

 
</div> <!--end of div clas "ADVERTCONT"--> 
 

 
</div><!--end of div clas "CONTAINER"-->

Answer 2

Ниже простое решение

setInterval(function(){ 
 
    jQuery('.advertcont:visible:eq(0)').fadeOut(); 
 
}, 15000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1 class="advert"> Spsonsord Links</h1> 
 
<div class="advertcont"> 
 
<img src="images/advertimage/lap.png" class="advertimg"> 
 
<p class="adverttext">Get the Best Shoes at 30GHS.</p> 
 
<a class="advertlink" href="#">www.shoes.com</a> 
 

 
</div> <!--end of div clas "ADVERTCONT"--> 
 
<div class="advertcont"> 
 
<img src="images/advertimage/lap.png" class="advertimg"> 
 
<p class="adverttext">Get the Best Shoes at 30GHS.</p> 
 
<a class="advertlink" href="#">www.shoes.com</a> 
 

 
</div> <!--end of div clas "ADVERTCONT"--> 
 
<div class="advertcont"> 
 
<img src="images/advertimage/lap.png" class="advertimg"> 
 
<p class="adverttext">Get the Best Shoes at 30GHS.</p> 
 
<a class="advertlink" href="#">www.shoes.com</a> 
 

 
</div> <!--end of div clas "ADVERTCONT"--> 
 
<div class="advertcont"> 
 
<img src="images/advertimage/lap.png" class="advertimg"> 
 
<p class="adverttext">Get the Best Shoes at 30GHS.</p> 
 
<a class="advertlink" href="#">www.shoes.com</a> 
 

 
</div> <!--end of div clas "ADVERTCONT"--> 
 
<div class="advertcont"> 
 
<img src="images/advertimage/lap.png" class="advertimg"> 
 
<p class="adverttext">Get the Best Shoes at 30GHS.</p> 
 
<a class="advertlink" href="#">www.shoes.com</a> 
 

 
</div> <!--end of div clas "ADVERTCONT"--> 
 

 
</div><!--end of div clas "CONTAINER"-->

Answer 3

Добавьте CSS.

.advertcont{ 
    display:none; 
} 

Тогда ваш HTML

<h1 class="advert"> Spsonsord Links</h1> 
     <div class="advertcont"> 
      <img src="http://placehold.it/350x150" class="advertimg"> 
      <p class="adverttext">Get the Best Shoes at 30GHS.</p> 
      <a class="advertlink" href="#">www.shoes.com</a> 

     </div> <!--end of div clas "ADVERTCONT"--> 
     <div class="advertcont"> 
      <img src="http://placehold.it/350x150" class="advertimg"> 
      <p class="adverttext">Get the Best Shoes at 30GHS.</p> 
      <a class="advertlink" href="#">www.shoes.com</a> 

     </div> <!--end of div clas "ADVERTCONT"--> 
     <div class="advertcont"> 
      <img src="http://placehold.it/350x150" class="advertimg"> 
      <p class="adverttext">Get the Best Shoes at 30GHS.</p> 
      <a class="advertlink" href="#">www.shoes.com</a> 

     </div> <!--end of div clas "ADVERTCONT"--> 
     <div class="advertcont"> 
      <img src="http://placehold.it/350x150" class="advertimg"> 
      <p class="adverttext">Get the Best Shoes at 30GHS.</p> 
      <a class="advertlink" href="#">www.shoes.com</a> 

     </div> <!--end of div clas "ADVERTCONT"--> 
     <div class="advertcont"> 
      <img src="http://placehold.it/350x150" class="advertimg"> 
      <p class="adverttext">Get the Best Shoes at 30GHS.</p> 
      <a class="advertlink" href="#">www.shoes.com</a> 

     </div> <!--end of div clas "ADVERTCONT"--> 

    </div><!--end of div clas "CONTAINER"--> 

Тогда некоторые JQuery

$(function() { 
      $(".advertcont").each(function(index, element) { 
       setTimeout(function() { 
        // fade previous element if any existed 
        if ($(element).prev().hasClass('advertcont')) { 
         $(element).prev().fadeOut(1000, function() { 
          $(element).show(1000); 
         }); 
        } else { 
         $(element).show(1000); 
        } 
        // set timer to index (current iteration of the loop (current element)) * 15 seconds: 
       }, index * 15000); 

      }); 
     }); 

Найти здесь https://jsfiddle.net/njueukavi/3exn83ct/