首页 文章

使用Javascript / JQuery在Bootstrap Carousel上循环Active类

提问于
浏览 次
-1

所以我正在为我正在使用的CMS开发Bootstrap Carousel模块 .

我遇到的问题是，当CMS使用用户上传的图像实现轮播时，轮播项目中缺少活动类，因此，它不会显示为开始或循环显示图像 .

<section class="image-carousel">
    <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="4000">
        <div class="carousel-inner" role="listbox">
            <div class="item">
                <img src="image1.jpg">
                <div class="carousel-caption">
                    Caption goes here
                </div>
            </div>
           <div class="item">
                <img src="image2.jpg">
                <div class="carousel-caption">
                    Caption goes here
                </div>
            </div>
           <div class="item">
                <img src="image3.jpg">
                <div class="carousel-caption">
                    Caption goes here
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#carousel" 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" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
    </div>
</section>

我想使用Javascript / JQuery将活动类添加到第一个项目，然后删除此类并将其添加到给定时间间隔中的下一个项目

我怎样才能做到这一点？

javascript jquery twitter-bootstrap

1 回答

  • 0

    未经测试：

    //init some variables
var currentItem= 0;
var delay= parseInt($('#carousel').prop('data-interval'));
//set first item active
$('.carousel-inner .item').first().addClass('active');
//wait delay milliseconds to call nextItem function
setInterval(nextItem, delay);

function nextItem(){
  //increase index, and loop if necessary
  currentItem++;
  if (currentItem== $('.carousel-inner .item').length) currentItem= 0;
  //remove 'active' class from all items, and add it to the current one
  $('.carousel-inner .item').removeClass('active').eq(currentItem).addClass('active');
  //wait delay milliseconds to call this function again
  setInterval(nextItem, delay);

}
    回复于

相关问题