如何在鼠标悬停时播放引导4旋转木马，并在页面加载时禁用自动播放？

Question

我用引导4创建了一个旋转木马。我在悬停中完成了循环。但是，当页面加载时，旋转木马自动播放。是否在页面加载时禁用自动播放，并将其作为第一张幻灯片，仅当鼠标悬停在其上方时才播放？

而且，当鼠标离开时，它会停下来。当你再一次在它上空盘旋时，它就会播放。

我在下面提供了我的HTML和JS。

谢谢!

我试着添加“暂停”：“对JS的忠诚”。只是暂停了整个旋转木马。我还尝试输入数据间隔: 200到HTML并从JS中删除它。然而，这只允许一个奇异的循环和暂停工作，并且当我移动鼠标到旋转木马上并离开它时，它就不能工作了。

     <div id="carouselWork" class="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="Work/Posters/1.jpg" style="width:100%;">
        </div>
        <div class="carousel-item">
            <img src="Work/Posters/2.jpg" style="width:100%;">
        </div>
        <div class="carousel-item">
            <img src="Work/Posters/3.jpg" style="width:100%;">
        </div>
        <div class="carousel-item">
            <img src="Work/Posters/4.jpg" style="width:100%;">
        </div>
        <div class="carousel-item">
            <img src="Work/Posters/5.jpg" style="width:100%;">
        </div>
      </div>
    </div>



$(document).ready(function() {

$('.carousel').carousel({
  interval: 200
})

$('#carouselWork').hover(function(){
   $(".carousel").carousel('cycle');
},function(){
   $(".carousel").carousel('pause');
});
});

期望:当页面加载时，我希望旋转木马被暂停。当我悬停在旋转木马上时，它将在指定的200周内循环通过。当我把鼠标移到旋转木马外面时，它会停下来。

实际:播放/暂停悬停的功能可以工作，但当页面加载时，旋转木马自动播放间隔为200。

Answer 1

为此，需要在HTML中使用data-*属性。

数据-暂停=“真”

所以，现在您可以在启动时暂停间隔。

要启用mouseEnter时的自动播放和禁用mouseLeave时的自动播放，可以在Jquery中使用.on方法

$(".carousel").on("mouseenter",function() {
  $(this).carousel('cycle');
}).on("mouseleave", function() {
  $(this).carousel('pause');
});

对于控件mouseenter和mouseleave函数间隔，可以再次使用HTML数据-*属性。

数据间隔=“200”

活片段

​

$(".carousel").on("mouseenter",function() {
  $(this).carousel('cycle');
}).on("mouseleave", function() {
  $(this).carousel('pause');
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div id="carouselWork" class="carousel slide bg-dark" data-pause="true" data-interval="200">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/1920/720/?image=1" class="d-block w-100" alt="">
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/1920/720/?image=10" class="d-block w-100" alt="">
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/1920/720/?image=20" class="d-block w-100" alt="">
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

​

Answer 2

它适用于通用的诱饵旋转木马。只在body标记中添加此代码

 <script>
    $(document).ready(function(){
        $("#carousel").carousel({interval: 300, pause: false, wrap:true});
        $("#carousel").carousel("pause");
    });
    
    $(".carousel").on("mouseenter",function() {
        $(this).carousel('cycle');
      }).on("mouseleave", function() {
        $(this).carousel('pause');
    });
 <script>