滑动引导图像时更改div背景颜色

Question

我想做这样的事情。当选择页面加载和第一个图像时，“在线录入”div部分背景颜色（＃034121）与其他4个div背景颜色（＃007f3d）不同。

当第二张图像正在运行时，“入场测试结果”div部分背景颜色变为（＃034121），此颜色和其他4 div背景颜色变为此颜色（＃007f3d）。

这是所有其他图像和div的连续过程。喜欢图像表示那些图像的div元素。

我是javascript初学者。所以，我不明白怎么解决这个问题。

这里是bootstrap工作示例链接：http://www.bootply.com/NSXQJ8Xmy6

Answer 1

<强> Updated bootply

基本上，您需要使用slid.bs.carousel bootstrap-carousel事件并获取当前carousel slide的索引，在{{1}中找到包含该索引的div element } #hot_news下的元素，并为其添加div.row类。同时，在添加之前，请从active下的所有其他active class移除divs。

以下是如何做到这一点。

div.row

<强> CSS

$('#carousel-example-generic').on('slid.bs.carousel', function (e) {
    var currentIndex = $(e.relatedTarget).index();
    $("#hot_news .row div.active").removeClass('active');
    $("#hot_news .row div").eq(currentIndex).addClass('active');
});

$(document).ready(function(){
  $("#hot_news .row div").eq(0).addClass('active'); //add to 0 by default on page load
});