bootstrap carousel轮播插件常见问题不自动播放
bootstrap 现在有很多版本，不同的版本有不同的轮播效果，可以试一下，可以引入bootstrap.js或者引入carousel.js
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<style>
#myCarousel { width: 900px;margin: 20px auto;}
.carousel-control span { display: block;font-size: 150px;margin-top: 120px;}
</style>
<body>
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<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>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<a href="http://www.baidu.com"><img src="img/1.jpg" alt="First slide"></a>
<div class="carousel-caption">兰博基尼</div>
</div>
<div class="item">
<a href="http://www.jd.com"><img src="img/2.jpg" alt="Second slide"></a>
<!--<div class="carousel-caption">蓝宝坚尼</div>-->
</div>
<div class="item">
<a href="http://www.taobao.com"><img src="img/6.jpg" alt="Third slide"></a>
<!--<h1 class="carousel-caption">布加迪</h1>-->
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev"><span>‹</span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"><span>›</span>
</a>
</div>
</body>
<script src="//cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
上面引入的版本是正常的，其他版本会出现轮播不自动播放，一行代码解决问题 ↓
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">
或者
$('#myCarousel').carousel();
如果改变轮播时间间隔修改interval参数 ↓
$(function(){
$('#myCarousel').carousel({
interval: 1000
});
});
设置不自动播放 ↓
$(function(){
$('#myCarousel').carousel({
pause: true,
interval: false
});
});
6420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
