bootstrap插件carousel.js自动轮播正确设置

发布时间:2015-08-26 12:39 | 人气数:799

Bootstrap是一个非常好的css/javaScript框架,尤其对于移动端的自适应和适配能力都比较强。昨天用Bootstrap自带的Carousel写了一个图片轮播的广告部分,用js调用后却出现了不能自动播放的问题。

查了一下,发现真的有不少人问Bootstrap的Carousel组件不能自动播放的问题,这里要注意几个问题:

先看一下Carousel的正确写法(代码,这里使用的是Bootstrap 2.3.2版本):

头部bootstrap的JS与样式调用:

<link href="http://cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script type='text/javascript' src='http://libs.baidu.com/jquery/1.8.3/jquery.min.js'></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>

幻灯片展示代码:

<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="active item">
        <img src="https://www.ecan5.com/usr/uploads/2015/08/4086635665.jpeg" />
        <div class="carousel-caption">
            <h4>东莞14岁女生考上复旦 其父当年15岁上武大</h4>
            <p>今年高考第一批本科院校的录取工作已经开始,东莞年仅14岁的女生袁一帆,以(理科)677分的成绩被复旦大学录取。去年她高二就参加了高考,考了613分,但没能被允许上大学。</p>
        </div>
    </div>
    <div class="item">
        <img src="https://www.ecan5.com/usr/uploads/2015/08/2928502295.jpeg" />
        <div class="carousel-caption">
            <h4>你的奢望要配得上你的本事</h4>
        </div>
    </div>
    <div class="item">
        <img src="https://www.ecan5.com/usr/uploads/2015/08/2199142246.jpg" />
        <div class="carousel-caption">
            <h4>百度编辑器UEditor添加“通用代码”视频</h4>
        </div>
    </div>
  </div>
  <!-- 轮播(Carousel)导航 -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
用JS的方式设置轮播参数:
<script type="text/javascript">
    $('.carousel').carousel({
        interval:5000,  //延时间隔5秒
        pause:"hover",  //鼠标放图片上暂停 false不暂停
    })
</script>
不要直接在HTML中使用data-ride="carousel"参数,用JS的方式设置轮播参数即可解决不能自动播放的问题。

bootstrap v2.3.2与jquery-1.11.3代码打包下载:bootstrap v2.3.2.rar
关键词:JavaScript,广告图片, bootstrap幻灯片