在Bootstrap 3中,使用jQuery有一种方法可以按轮播的索引进行排序,并为每张幻灯片添加自定义间隔,以便我可以一张幻灯片10000ms,另一张500ms等?
我知道您可以设置data-interval属性,但这可以设置所有幻灯片的速度,因为您无法为每个项目添加自定义的interval属性。
data-interval="3000"
我的轮播设置如下:
<div id="carousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<a href="#">
<img class="img-responsive" src="">
</a>
</div>
<div class="item">
<a href="#">
<img class="img-responsive" src="">
</a>
</div>
<div class="item">
<a href="#">
<img class="img-responsive" src="">
</a>
</div>
<div class="item">
<a href="#" >
<img class="img-responsive" src="">
</a>
</div>
</div>
您可以创建一个自定义属性,该属性表示应显示幻灯片多长时间,将其拉出以显示slide.bs.carousel
或slid.bs.carousel
事件中的活动项(无论您偏爱/最适合自己的行为),然后将其设置为超时以转到下一个滑动。
$('#carousel-example-generic').on('slide.bs.carousel', function() {
var interval = $('div.item.active').attr('duration');
setTimeout(function() {
$('.carousel').carousel('next');
}, interval);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" duration="3000">
<img src="http://placehold.it/400x200" alt="..." />
<div class="carousel-caption">
First
</div>
</div>
<div class="item" duration="2000">
<img src="http://placehold.it/400x200" alt="..." />
<div class="carousel-caption">
Second
</div>
</div>
<div class="item" duration="1000">
<img src="http://placehold.it/400x200" alt="..." />
<div class="carousel-caption">
Third
</div>
</div>
<div class="item" duration="500">
<img src="http://placehold.it/400x200" alt="..." />
<div class="carousel-caption">
Fourth
</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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句