使用Javascript/JQuery循环启动传送带上的活动类

Question

因此，我正在为我正在使用的CMS开发Bootstrap传送带模块的过程。

我遇到的问题是，当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来活跃类添加的第一个项目，然后删除这个类，并将其添加到下一个项目在一个给定的时间间隔

我怎样才能做到这一点？

Answer 1

没有测试：

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

}