Question

我创建了一个带有引导程序4的旋转木马。但是，轮播会在页面加载时自动播放。无论如何，是否可以禁用页面加载时的自动播放功能并将其作为第一张幻灯片，仅当鼠标悬停在其上时播放？

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

我在下面提供了HTML和JS。

谢谢！

我尝试在JS中添加pause：true。只是暂停了整个轮播。我也尝试过输入数据间隔：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

您需要为此使用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" 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

它适用于通用 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>

如何在鼠标悬停时播放bootstrap 4轮播并禁用页面加载的自动播放功能？

2 个答案: