Блог

Главная - Вопросы по программированию - Как автоматически показывать / скрывать Divs при загрузке страницы?

Как автоматически показывать / скрывать Divs при загрузке страницы?

#javascript #jquery

#javascript #jquery

Вопрос:

Я пытаюсь создать своего рода слайд-шоу из отзывов клиентов. При загрузке страницы я хотел бы показывать / скрывать следующее свидетельство каждые несколько секунд. У меня есть пример работы, но только с использованием метода click. Может быть, кто-нибудь может указать, как заставить это работать без щелчка, а скорее автоматически при загрузке страницы?

Я попытался заменить .click на .ready/.load, но ничего не происходит.

 $(function(){
 $("button").click(function(){
        $(this).parent().fadeOut(500).next().delay(500).fadeIn(500);
    });
});  
 section {
    width: 300px;
    height: 250px;
    background-color: #ADD3C9;
    margin: auto;
    display: flex;
    flex-direction: column;
}
button {
    display: block;
    margin-top: auto;
    margin-right: auto;
    margin-left: auto;
    font-size: 2em;
    padding: 10px;
    margin-bottom: 10px;
}
#p2,#p3,#p4 {display:none;}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="p1">
    <div>Content for  class "1" Goes Here</div>
  <button>Next</button>
</section>

<section id="p2">
    <div>Content for  class "2" Goes Here</div>
  <button>Next</button>
</section>

<section id="p3">
  <div>Content for  class "3" Goes Here</div>
  <button>Next</button>
</section>

<section id="p4">
  <div>Content for  class "4" Goes Here</div>
</section>

Комментарии:

1. вы можете использовать setInterval и setTimeout

2. спасибо, я получил его для перемещения, но проблема сейчас в том, что он показывает все остальные разделы сразу после исчезновения. setInterval(function(){ $(‘section’).fadeOut(500).next().delay(500).fadeIn(500);}, 3000);

Ответ №1:

 $(function(){
  setInterval(function() {
        $('section:not(#p4)[style*="display: flex"]').fadeOut(500).next().delay(500).fadeIn(500);
  }, 1000);
});  
 section {
    width: 300px;
    height: 250px;
    background-color: #ADD3C9;
    margin: auto;
    display: flex;
    flex-direction: column;
}
button {
    display: block;
    margin-top: auto;
    margin-right: auto;
    margin-left: auto;
    font-size: 2em;
    padding: 10px;
    margin-bottom: 10px;
}
#p2,#p3,#p4 {display:none;}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="p1" style="display: flex;">
    <div>Content for  class "1" Goes Here</div>
  <button>Next</button>
</section>

<section id="p2">
    <div>Content for  class "2" Goes Here</div>
  <button>Next</button>
</section>

<section id="p3">
  <div>Content for  class "3" Goes Here</div>
  <button>Next</button>
</section>

<section id="p4">
  <div>Content for  class "4" Goes Here</div>
</section>