使用Javascript/JQuery在引导转盘上循环活动类

使用Javascript/JQuery在引导转盘上循环活动类,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,所以我正在为我正在使用的CMS开发一个引导转盘模块 我遇到的问题是,当CMS使用用户上传的图像实现旋转木马时,旋转木马项目中缺少活动类,因此,它不会显示为开始或循环浏览图像 <section class="image-carousel"> <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="4000"> <div class="carous

所以我正在为我正在使用的CMS开发一个引导转盘模块

我遇到的问题是,当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将一个活动类添加到第一个项中,然后删除该类并在给定的时间间隔内将其添加到下一个项中

我如何才能做到这一点?

未测试:

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

}

干杯们会尽快尝试并回复你:)谢谢你的帮助!我通过使用javascript在使用document.ready的第一个item元素上添加一个活动类来实现它。