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

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