bootstrap自动轮播
时间: 2023-11-12 11:09:19 浏览: 35
要在Bootstrap中实现自动轮播,你需要使用Carousel组件。首先,在HTML中添加Carousel标记,如下所示:
```html
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
</div>
```
在这个示例中,我们使用了三个Carousel项。每个项都包含一张图片。请注意,我们将第一个Carousel项标记为“active”,以便在页面加载时显示。
接下来,您需要添加JavaScript代码,以便将Carousel设置为自动轮播。您可以使用以下代码:
```javascript
$('.carousel').carousel({
interval: 2000
})
```
在这个示例中,我们将Carousel设置为每2秒自动轮播。
最后,您需要包含jQuery库。您可以在以下网址上下载jQuery库:https://jquery.com/download/
将jQuery库包含在HTML文件中:
```html
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
```
现在,您的Bootstrap Carousel将自动轮播。