JQuery-在活动时根据数据旋转木马滑动时更改背景图像

是否有方法覆盖引导转盘指示器？我想在项目处于活动状态时更改指示器的背景

通常在bootstrap的默认转盘中，指示器仅如下所示：

它与class=“active”有关，但我不知道如何在js中正确执行它。提前谢谢

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->

    <ol class="carousel-indicators" id="div-indicators">
        <li class="ind-img1 active" id="round-image1" data-target="#myCarousel" data-slide-to="0"></li>
        <li class="ind-img2" id="round-image2" data-target="#myCarousel" data-slide-to="1"></li>
        <li class="ind-img3" id="round-image3" data-target="#myCarousel" data-slide-to="2"></li>
        <li class="ind-img4" id="round-image4" data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <div class="carousel-inner">
        <div class="item active" id="1">
            <!-- Indicators -->

            <div class="container item_quote">
                <img src="{% static 'img/landingpage/quote-1.png' %}">
            </div>

            <div class="container item_message">
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elite.</span><br/>
                <span>Lorem ipsum dolor sit amet, consectetur </span><br/>
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elite.</span><br/>
                <a class="proof-modal" data-toggle="modal" data-target="#lightbox">
                    Click here to enlarge image
                </a><br/>

                <span>- first testimonial</span>
            </div>

            <div class="container item_quote">
                <img src="{% static 'img/landingpage/quote-2.png' %}">
            </div>
        </div>

        <!-- more items -->
    </div>
</div> 

---

对于每个项目，我都可以根据活动项目更改背景图像。

要更改活动

旋转木马指示器的css样式，请使用此选择器
.carousel indicators>li.active
，以活动项目为目标

要对每个img进行预览，您需要将相同的img以相同的顺序添加到
转盘指示器中
，以创建预览效果


.carousel-indicators.carousel-indicators--缩略图{
宽度：80px；
高度：45px；
保证金：0；
边界：无；
边界半径：0；
}
.carousel-indicators.carousel-indicators--缩略图。激活{
背景色：透明；
}
.carousel-indicators.carousel-indicators--缩略图。活动。缩略图{
边框颜色：红色；
}







幻灯片1
幻灯片2
幻灯片3
要更改活动
转盘指示器的css样式，请使用此选择器
.carousel indicators>li.active
以活动指示器为目标

要对每个img进行预览，您需要将相同的img以相同的顺序添加到
转盘指示器中
，以创建预览效果


.carousel-indicators.carousel-indicators--缩略图{
宽度：80px；
高度：45px；
保证金：0；
边界：无；
边界半径：0；
}
.carousel-indicators.carousel-indicators--缩略图。激活{
背景色：透明；
}
.carousel-indicators.carousel-indicators--缩略图。活动。缩略图{
边框颜色：红色；
}







幻灯片1
幻灯片2
幻灯片3
我解决了它。我必须使用事件处理程序“slide.bs.carousel”或“slided.bs.carousel”
滑动时-slide.bs
滑动后-slided.bs

$('#Carousel').on('slide.bs.carousel', function (e) {
  var id = e.relatedTarget.id;
  switch (id) {
    case "1":
      // img1
      break;
    case "2":
      // img2
      break;
    case "3":
      // img3
      break;
    default:
      // none
  }
})

我解决了。我必须使用事件处理程序“slide.bs.carousel”或“slided.bs.carousel”
滑动时-slide.bs
滑动后-slided.bs

$('#Carousel').on('slide.bs.carousel', function (e) {
  var id = e.relatedTarget.id;
  switch (id) {
    case "1":
      // img1
      break;
    case "2":
      // img2
      break;
    case "3":
      // img3
      break;
    default:
      // none
  }
})

不，我想更改它，例如：项[0]-背景：img1.png项[1]-img2.png项[2]=img3.png我要找的是在“活动”幻灯片切换到下一项时更改背景图像，您的示例显示幻灯片时单击不我相信它不在CSS中，您需要在javascript中操作它。你必须让每个项目都改变背景，我需要进入下一个项目的事件处理程序或函数（例如itemChanged），而不是函数clickno，我想改变它，比如：项目[0]-背景：img1.png项目[1]-img2.png项目[2]=img3.png当“活动”时，我想要改变的是背景图像滑动到下一个项目，您的示例显示滑动时单击不我相信它不在CSS中，您需要在javascript中操作它。你必须让每个项目为你改变它的背景，我需要的事件处理程序或功能，继续到下一个项目，（例如itemChanged），而不是功能点击