,可以通过以下步骤完成:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 轮播内容 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img1.jpg" alt="Slide 1">
<div class="carousel-caption">
<h3>Slide 1</h3>
<p>描述Slide 1的内容</p>
</div>
</div>
<div class="carousel-item">
<img src="img2.jpg" alt="Slide 2">
<div class="carousel-caption">
<h3>Slide 2</h3>
<p>描述Slide 2的内容</p>
</div>
</div>
<div class="carousel-item">
<img src="img3.jpg" alt="Slide 3">
<div class="carousel-caption">
<h3>Slide 3</h3>
<p>描述Slide 3的内容</p>
</div>
</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>
$(document).ready(function(){
// 找到Carousel组件
var carousel = $('#myCarousel');
// 找到当前活动的Carousel项
var activeItem = carousel.find('.carousel-item.active');
// 移除当前活动项的活动类
activeItem.removeClass('active');
// 找到下一个Carousel项
var nextItem = activeItem.next();
// 如果已经是最后一项,则选择第一项
if (nextItem.length === 0) {
nextItem = carousel.find('.carousel-item').first();
}
// 添加活动类到下一个Carousel项
nextItem.addClass('active');
});
这样,当执行代码时,就会将当前活动的Carousel项移除活动类,并将下一个Carousel项添加活动类,实现了在Carousel Bootstrap Ajax Jquery中添加活动类的功能。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云