引导轮播：在幻灯片更改时向正文添加一个类答案

【问题标题】：Bootstrap carousel : add a class to body on slide change引导轮播：在幻灯片更改时向正文添加一个类
【发布时间】：2017-01-07 19:12:05
【问题描述】：

当幻灯片发生变化时，我想在正文中添加一个类。假设我有 2 张幻灯片，当幻灯片 1 处于活动状态时，它会在正文中添加一个类“slide1”。当数字 2 处于活动状态时，它会从正文中删除“slide1”并添加“slide2”。我没有特定的代码，因为我将基本的引导标记用于轮播。提前致谢。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://placehold.it/650x250">
      <div class="carousel-caption">
       This is slide 1
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/650x250">
      <div class="carousel-caption">
        This is slide 2
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

【问题讨论】：

“对身体”是什么意思？从字面上看是body标签还是<div class="carousel-inner" role="listbox">或者<div class="item active">或者别的什么？
我的意思是页面的标签。抱歉，没有指定。

标签： jquery twitter-bootstrap carousel

【解决方案1】：

当幻灯片转换完成时，引导程序中有一个事件，用于轮播： slid.bs.carousel。参考是here。

这是jsFiddle。（完全相同的代码在我的本地主机上完全运行，我不明白为什么，但是在 jsfiddle 上，next 的值有一些错误）

所以，当一个转换关闭时，你只需要从 body 中移除前一个类，然后添加 active。

从标记中删除 slide0，因为只有 2 个滑块，然后在你的 body 中添加一个初始化类 slide1。

那么你去：

$(function () {
    var active = '';
    var next = null;
    $('#carousel-example-generic').on('slide.bs.carousel', function () {
        $('.carousel-indicators li').each(function () {
            if ($(this).hasClass('active')) {
                active = $(this).data('slide-to');
                console.log(active);
                next = $(this).next('li').data('slide-to');
            }
        });
        $('body').removeClass('slide' + active);
        if (typeof next === 'undefined') {
            $('body').addClass('slide1');
        } else {
            $('body').addClass('slide' + next);
        }

    });
});

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" id="firstOl" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1" id="secondOl"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2" id="thirdOl"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://placehold.it/650x250">
      <div class="carousel-caption">
       This is slide 1
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/650x250">
      <div class="carousel-caption">
        This is slide 2
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
<script>
$(document).ready(function(){
$('#carousel-example-generic').bind('slide.bs.carousel', function (e) {
    console.log('slide event!');
if($('.firstOl').hasClass('active')){
$('body').addClass('slide1')
}else if($('.secondOl').hasClass('active')){
$('body').addClass('slide2')
}else if($('.thirdOl').hasClass('active')){
$('body').addClass('slide3')
}
});
})
</script>
</body>
</html>

【讨论】：

【解决方案3】：

我用过：

the slid.bs.carousel event

当轮播完成其幻灯片转换时触发此事件。
the .addClass() method

将指定的类添加到匹配元素集中的每个元素。
the .removeClass() method

从匹配元素集中的每个元素中删除单个类、多个类或所有类。

请检查结果。是你想要达到的吗？

var selectBody = $( 'body' );
var curId = 0;
selectBody.addClass( 'slide-' + curId );

$( '#carousel-example-generic' ).on( 'slid.bs.carousel', function () {
    var newId = $( this ).find( 'li.active' ).attr( 'data-slide-to' );
    if ( newId != curId ) {
      selectBody.removeClass( 'slide-' + curId ).addClass( 'slide-' + newId );
      curId = newId;
    }
});

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

body { padding: 20px 80px; }
.carousel-inner img { width: 100%; }
.slide-0 { background: #f9c; }
.slide-1 { background: #cf9; }
.slide-2 { background: #9cf; }

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="//placehold.it/900x300/c69/fff/?text=Slide%200">
    </div>
    <div class="item">
      <img src="//placehold.it/900x300/9c6/fff/?text=Slide%201">
    </div>
    <div class="item">
      <img src="//placehold.it/900x300/69c/fff/?text=Slide%202">
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

【讨论】：