Question

当幻灯片更改时，我想向正文添加一个类。假设我有2张幻灯片，当幻灯片1处于活动状态时，它会在主体上添加一个“slide1”类。当数字2处于活动状态时，它会从正文中删除“slide1”并添加“slide2”。我没有特定的代码，因为我正在使用旋转木马的基本Bootstrap标记。提前谢谢。

<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>

Answer 1

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

这是jsFiddle。（完全相同的代码完全在我的localhost上工作，我不明白为什么，但在jsfiddle上有一些错误与next的值）

因此，当转换失败时，您只需要从正文中删除上一个类，然后添加活动。

从标记中删除slide0，因为只有2个滑块，并在您的身体中添加了一个init类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);
        }

    });
});

Answer 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>

Answer 3

我已经使用过：

the slid.bs.carousel event

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

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

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

请检查结果。这是你想要实现的目标吗？

＆＃13;

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;
    }
});

＆＃13;

@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; }

＆＃13;

<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>

＆＃13;

Bootstrap轮播：在幻灯片更改时向正文添加一个类

3 个答案: