使用Javascript/JQuery在引导转盘上循环活动类
所以我正在为我正在使用的CMS开发一个引导转盘模块 我遇到的问题是,当CMS使用用户上传的图像实现旋转木马时,旋转木马项目中缺少活动类,因此,它不会显示为开始或循环浏览图像使用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
<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元素上添加一个活动类来实现它。