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

Posted 2023-05-08

【中文标题】如何在鼠标悬停时播放引导 4 轮播，并在页面加载时禁用自动播放？

【英文标题】：How to play bootstrap 4 carousel on mouse hover WITH disabled autoplay on page load?

【发布时间】：2019-06-11 08:09:35

【问题描述】：

我用 bootstrap 4 创建了一个轮播。我在悬停时完成了循环工作。但是，当页面加载时，轮播会自动播放。有没有办法在页面加载时禁用自动播放，让它成为第一张幻灯片，只在鼠标悬停时播放？

此外，当鼠标离开时，它会暂停。当您再次将鼠标悬停在它上面时，它就会播放。

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

谢谢！

我尝试在 JS 中添加 pause: true 。这只是暂停了整个轮播。我还尝试在 HTML 中输入 data-interval: 200 并将其从 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 的间隔自动播放。

【问题讨论】：

所以你想要的，当页面加载禁用autoplay时，当您悬停它autoplay时，鼠标熄灭后，您需要再次停止它？ span>

【参考方案1】：

您需要为此使用data-* 属性，在 HTML 中添加

data-pause="true"

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

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

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

对于控制 mouseenter 和 mouseleave 函数的间隔，可以再次使用 HTML data-* 属性

data-interval="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" >
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/1920/720/?image=10" class="d-block w-100" >
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/1920/720/?image=20" class="d-block w-100" >
    </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>

【讨论】：

这很完美！非常感谢您的帮助:)

【参考方案2】：

它适用于通用 boostrapp 轮播。 仅在 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>