引导旋转木马:在幻灯片更改时向主体添加一个类

当幻灯片发生变化时，我想在幻灯片主体中添加一个类。假设我有两张幻灯片，当幻灯片1处于活动状态时它会在主体中添加一个类slide1。当数字2处于活动状态时，它将从body中删除"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>

在bootstrap中有一个事件，用于carousel，当滑动过渡完成时:slid.bs.carousel。参考资料在这里

这是一个jsFiddle。(完全相同的代码在我的本地主机上完全工作，我不明白为什么，但在jsfiddle上，next的值有一些错误)

所以，当一个过渡结束时，你只需要从body中删除之前的类，并添加active.

从标记中删除slide0，因为只有2个滑块，并添加一个初始化类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);
        }
    });
});

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

我用过:

slid.bs.carousel事件

当旋转木马完成滑动转换时触发此事件。
.addClass()方法

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

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

请检查结果。这是你想要达到的目标吗?

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>

相关内容

最新更新

热门标签：