jquery两行轮播
时间: 2023-11-20 19:58:24 浏览: 84
以下是使用jQuery实现的两行轮播的示例代码:
```html
<div class="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img1.jpg" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="img2.jpg" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="img3.jpg" alt="Slide 3">
</div>
<div class="carousel-item">
<img src="img4.jpg" alt="Slide 4">
</div>
<div class="carousel-item">
<img src="img5.jpg" alt="Slide 5">
</div>
</div>
</div>
```
```javascript
$(document).ready(function(){
$('.carousel').carousel({
interval: 2000 // 设置轮播间隔时间为2秒
})
})
```
这里使用了Bootstrap的轮播组件,其中`.carousel`是最外层容器,`.carousel-inner`是轮播项的容器,`.carousel-item`是每个轮播项。在JavaScript中,我们使用了jQuery的`.carousel()`方法来初始化轮播组件,并设置了轮播间隔时间为2秒。
阅读全文