根据 doco，使用以下命令将设置轮播循环速度：
$('.carousel').carousel({
interval: 2000
})
但是，如果您已经初始化了轮播，则以不同的时间间隔调用上述内容没有任何效果。
我应该注意，通过 JS 初始化轮播并不会设置data-interval在旋转木马上。我也对这个主题进行了相当多的搜索，但结果都是关于人们试图以固定速度进行设置的。我想在初始化后更改速度。
代码如下：
$(function () {
$('#homeCarousel').carousel({
interval:2000,
pause: "false"
});
$('#slowButton').click(function () {
$('#homeCarousel').carousel({interval: 10000});
});
$('#fastButton').click(function () {
$('#homeCarousel').carousel({interval: 1000});
});
});
#carouselButtons {
margin-left: 100px;
position: absolute;
bottom: 0px;
}
.item {
color: white;
background-color: black;
width:100%;
height: 350px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!-- Carousel -->
<div id="homeCarousel" class="carousel slide">
<!-- Menu -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Items -->
<div class="carousel-inner">
<!-- Item 1 -->
<div class="item active">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p>This is an example layout with carousel that uses the Bootstrap 3 styles.</p>
<p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
</p></div>
</div>
</div>
<!-- Item 2 -->
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>Percentage-based sizing</h1>
<p>With "mobile-first" there is now only one percentage-based grid.</p>
<p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
<div id="carouselButtons">
<button id="slowButton" type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-play"></span>
</button>
<button id="fastButton" type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-forward"></span>
</button>
</div>
</div>
轮播初始化后，不支持修改速度的选项。然而，这并不意味着它不能完成。以下是一些示例代码，可让您动态更改选项，包括间隔
$(function () {
$('#homeCarousel').carousel({
interval:2000,
pause: "false"
});
$('#slowButton').click(function () {
c = $('#homeCarousel')
opt = c.data()['bs.carousel'].options
opt.interval= 10000;
c.data({options: opt})
});
$('#fastButton').click(function () {
c = $('#homeCarousel')
opt = c.data()['bs.carousel'].options
opt.interval= 1000;
c.data({options: opt})
});
});
#carouselButtons {
margin-left: 100px;
position: absolute;
bottom: 0px;
}
.item {
color: white;
background-color: black;
width:100%;
height: 350px;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!-- Carousel -->
<div id="homeCarousel" class="carousel slide">
<!-- Menu -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Items -->
<div class="carousel-inner">
<!-- Item 1 -->
<div class="item active">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p>This is an example layout with carousel that uses the Bootstrap 3 styles.</p>
<p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
</p></div>
</div>
</div>
<!-- Item 2 -->
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="item">
<div class="container">
<div class="carousel-caption">
<h1>Percentage-based sizing</h1>
<p>With "mobile-first" there is now only one percentage-based grid.</p>
<p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
<div id="carouselButtons">
<button id="slowButton" type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-play"></span>
</button>
<button id="fastButton" type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-forward"></span>
</button>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
