如何在頁面加載時自動顯示/隱藏 Div？

Question

我正在嘗試創建某種客戶推薦的幻燈片。 在頁面加載時，我想每隔幾秒鍾顯示/隱藏下一個推薦。 我有示例工作，但只使用點擊方法。 也許有人可以指出如何在沒有點擊的情況下完成這項工作，而是在頁面加載時自動完成？

我嘗試用 .ready/.load 替換 .click，但沒有任何反應。

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

Answer 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>