首先,这不是我有bootstrap轮播的任何帖子的重复,并且我尝试为每个bootstrap轮播.item
设置时间间隔,并且我找到了它的代码from here,但是此示例不适用于我的代码片段,这是我的代码片段错误?我的代码与with this carousel相同,但是什么也没发生,如何为每个自举轮播项目设置时间间隔?
目前,这仅适用于每个轮播,并且我认为它应适用于每张幻灯片(覆盖默认值),原因有两个:
可以设置第一张幻灯片以显示快速概览等
有些幻灯片可能包含更多文字,需要更长的阅读延迟,而另一些则更少。
例如
<div class="carousel-inner">
<div class="active item" data-interval="500">…</div>
<div class="item" data-interval="5000">…</div>
<div class="item" data-interval="5000>…</div>
</div>
我的真实例子
$(window).load(function() {
var t;
var start = $('#carousel').find('.active').attr('data-interval');
t = setTimeout("$('#carousel').carousel({interval: 1000});", start - 1000);
$('#carousel').on('slid.bs.carousel', function() {
clearTimeout(t);
var duration = $(this).find('.active').attr('data-interval');
$('#carousel').carousel('pause');
t = setTimeout("$('#carousel').carousel();", duration - 1000);
})
$('.ani-icon-right-chevron').on('click', function() {
clearTimeout(t);
});
$('.ani-icon-chevron-pointing-to-the-left').on('click', function() {
clearTimeout(t);
});
});
#carousel {
width: 700px;
margin: 70px auto;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active" data-interval="300">
<a href="#"><img src="http://placekitten.com/1600/600" /></a>
<div class="carousel-caption">
<h3>Meow</h3>
<p>Just Kitten Around</p>
</div>
</div>
<div class="item" data-interval="600">
<a href="#"><img src="http://placekitten.com/1600/600" /></a>
<div class="carousel-caption">
<h3>Meow</h3>
<p>Just Kitten Around</p>
</div>
</div>
<div class="item" data-interval="900">
<a href="#"><img src="http://placekitten.com/1600/600" /></a>
<div class="carousel-caption">
<h3>Meow</h3>
<p>Just Kitten Around</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
最佳答案
编辑了您的代码,到目前为止,它对我有帮助
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="carousel" class="carousel slide" data-ride="carousel" data-interval="1000" >
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active" interval="1000">
<a href="#"><img src="http://placekitten.com/1600/600" /></a>
<div class="carousel-caption">
<h3>Meow</h3>
<p>Just Kitten Around</p>
</div>
</div>
<div class="item" interval="10000">
<a href="#"><img src="http://placekitten.com/1600/600" /></a>
<div class="carousel-caption">
<h3>Meow</h3>
<p>Just Kitten Around</p>
</div>
</div>
<div class="item" interval="5000">
<a href="#"><img src="http://placekitten.com/1600/600" /></a>
<div class="carousel-caption">
<h3>Meow</h3>
<p>Just Kitten Around</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(window).load(function () {
var st;
$('#carousel').on('slid.bs.carousel', function () {
// debugger;
var newinterval = $('#carousel .carousel-inner').find('.active').attr('interval');
$('#carousel').carousel("pause");
clearTimeout(st);
st = setTimeout("$('#carousel').carousel()", newinterval);
// $('#carousel').carousel({ interval: newinterval });
});
});
</script>
关于javascript - 如何为每个轮播元素设置间隔时间?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43465500/