如何在运行时更改 Bootstrap 轮播间隔？

时常我们会需要在 Bootstrap 轮播（Carousel）中更改轮播的自动间隔时间。这篇文章将会介绍如何在运行时更改 Bootstrap 轮播间隔。

方法一：使用 JavaScript

可以使用 JavaScript 来更改轮播的自动间隔时间。

首先，需要获取到轮播的对象。在 HTML 中，轮播通常是由一个类名为 carousel 的元素包裹的。例如，以下是一个简单的 Bootstrap 轮播：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- 轮播内容 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img/slide1.jpg" alt="轮播图 1">
    </div>
    <div class="carousel-item">
      <img src="img/slide2.jpg" alt="轮播图 2">
    </div>
    <div class="carousel-item">
      <img src="img/slide3.jpg" alt="轮播图 3">
    </div>
  </div>

  <!-- 控制按钮 -->
  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">上一个</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">下一个</span>
  </a>
</div>

可以使用以下 JavaScript 代码来获取到该轮播对象：

var myCarousel = document.getElementById('myCarousel')

接下来，可以通过更改 data-interval 属性来更改轮播的自动间隔时间。例如，以下代码将轮播的自动间隔时间更改为 5 秒：

myCarousel.setAttribute('data-interval', 5000)

方法二：使用 jQuery

如果已经使用了 jQuery，那么可以使用 jQuery 中的 attr() 方法来更改轮播的自动间隔时间。

首先，需要获取到轮播的对象。可以通过类名 .carousel 来选择该元素。例如，以下代码将获取到 ID 为 myCarousel 的轮播对象：

var myCarousel = $('#myCarousel')

接下来，可以使用 attr() 方法来更改 data-interval 属性的值。例如，以下代码将轮播的自动间隔时间更改为 5 秒：

myCarousel.attr('data-interval', 5000)

结论

以上就是在运行时更改 Bootstrap 轮播间隔的两种方法。如果没有特别需要，建议使用第一种方法，因为它不需要使用额外的库，且更加轻量级。