javascript - 如何在特定 slider 图像上加载带有延迟的模态？

Question

所以我能够让我的模态出现在第一张幻灯片上，问题是当第二张幻灯片出现时，我还希望在模态出现之前有一个延迟。我该如何在 javascript 中执行此操作，以便在每个 slider 处，我的模态出现 2 秒的延迟，之后当 slider 返回时，它会返回默认值并再次重新启动延迟过程？

<style>
.myModal {
  z-index: 1; /* Sit on top */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 650px; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.1); /* Black w/ opacity */
   display: none;
   }
</style>




<div class="myModal">
    <h1>Slide 1</h1>
  </div>

 <script>
 $(document).ready(function() {
   $(".myModal").delay(2000).fadeIn(500);
 });
 </script>

Answer 1

每次打开新幻灯片时，您都必须重复这一点，以便可以使用它:

setInterval(yourFunction() }, 8000);

yourFunction() 是使模态在您的条件下显示的函数。