Bootstrap的Carousel不能正常播放的几个原因

<p style="margin-top: 20px; margin-bottom: 20px; padding-top: 0px; padding-bottom: 0px; line-height: 1.8em; text-indent: 2em; font-family: 微软雅黑, Arial, 宋体; font-size: 14px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"></p><p style="margin-top: 20px; margin-bottom: 20px; padding-top: 0px; padding-bottom: 0px; line-height: 1.8em; text-indent: 2em; font-family: 微软雅黑, Arial, 宋体; font-size: 14px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">Bootstrap是一个非常好的css/javaScript框架，尤其对于移动端的自适应和适配能力都比较强。昨天用Bootstrap自带的Carousel写了一个图片轮播的广告部分，用js调用后却出现了不能自动播放的问题。</p><p style="margin-top: 20px; margin-bottom: 20px; padding-top: 0px; padding-bottom: 0px; line-height: 1.8em; text-indent: 2em; font-family: 微软雅黑, Arial, 宋体; font-size: 14px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">查了一下，发现真的有不少人问Bootstrap的Carousel组件不能自动播放的问题，这里要注意几个问题：</p><p style="margin-top: 20px; margin-bottom: 20px; padding-top: 0px; padding-bottom: 0px; line-height: 1.8em; text-indent: 2em; font-family: 微软雅黑, Arial, 宋体; font-size: 14px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">先看一下Carousel的正确写法（代码，这里使用的是Bootstrap 3.2版本）：</p><p style="margin-top: 20px; margin-bottom: 20px; padding-top: 0px; padding-bottom: 0px; line-height: 1.8em; text-indent: 2em; font-family: 微软雅黑, Arial, 宋体; font-size: 14px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><div id="<span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255);"><span style="margin: 0px; padding: 0px;">carousel-ad</span></span>" class="carousel slide" <span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0);"><span style="margin: 0px; padding: 0px;">data-ride="carousel"</span></span>><br style="margin: 0px; padding: 0px;" />    <ol class="carousel-indicators"><br style="margin: 0px; padding: 0px;" />      <li data-target="#carousel-ad" data-slide-to="0" class="active"></li><br style="margin: 0px; padding: 0px;" />      <li data-target="#carousel-ad" data-slide-to="1"></li><br style="margin: 0px; padding: 0px;" />      <li data-target="#carousel-ad" data-slide-to="2"></li><br style="margin: 0px; padding: 0px;" />    </ol><br style="margin: 0px; padding: 0px;" />    <div class="carousel-inner" role="listbox"><br style="margin: 0px; padding: 0px;" />      <div class="item active"><img class="img-responsive" src="images/pic01.jpg"></div><br style="margin: 0px; padding: 0px;" />      <div class="item"><img class="img-responsive" src="images/pic02.jpg"></div><br style="margin: 0px; padding: 0px;" />      <div class="item"><img class="img-responsive" src="images/pic03.jpg"></div><br style="margin: 0px; padding: 0px;" />    </div><br style="margin: 0px; padding: 0px;" />  </div></p><p style="margin-top: 20px; margin-bottom: 20px; padding-top: 0px; padding-bottom: 0px; line-height: 1.8em; text-indent: 2em; font-family: 微软雅黑, Arial, 宋体; font-size: 14px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><span style="margin: 0px; padding: 0px;">1、首先注意的部分是data-ride="carousel"</span></p><p style="margin-top: 20px; margin-bottom: 20px; padding-top: 0px; padding-bottom: 0px; line-height: 1.8em; text-indent: 2em; font-family: 微软雅黑, Arial, 宋体; font-size: 14px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">默认使用Bootstrap的Carousel组件，只需要加上 data-ride="carousel" 就可以实现自动播放了。无需使用初始化的js函数。所以，如果carousel不会自动播放，那么首先检查这个部分。这里还能加其他参数，比如是设置图片轮转的时间间隔。</p><p style="margin-top: 20px; margin-bottom: 20px; padding-top: 0px; padding-bottom: 0px; line-height: 1.8em; text-indent: 2em; font-family: 微软雅黑, Arial, 宋体; font-size: 14px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">代码：<div id="carousel-ad" class="carousel slide" data-ride="carousel" <span style="margin: 0px; padding: 0px; color: rgb(0, 0, 255);"><span style="margin: 0px; padding: 0px;">data-interval="2000"</span></span>></p><p style="margin-top: 20px; margin-bottom: 20px; padding-top: 0px; padding-bottom: 0px; line-height: 1.8em; text-indent: 2em; font-family: 微软雅黑, Arial, 宋体; font-size: 14px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;"><span style="margin: 0px; padding: 0px;">2、其实还有手动初始化carousel组件的方法</span></p><p style="margin-top: 20px; margin-bottom: 20px; padding-top: 0px; padding-bottom: 0px; line-height: 1.8em; text-indent: 2em; font-family: 微软雅黑, Arial, 宋体; font-size: 14px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">这个方法在Bootstrap 2.x就在使用，当 data-ride="carousel" 这个方法不管用的时候，可以手动初始化一下。代码如下：</p><p style="margin-top: 20px; margin-bottom: 20px; padding-top: 0px; padding-bottom: 0px; line-height: 1.8em; text-indent: 2em; font-family: 微软雅黑, Arial, 宋体; font-size: 14px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">$('#carousel-ad').carousel();</p><p style="margin-top: 20px; margin-bottom: 20px; padding-top: 0px; padding-bottom: 0px; line-height: 1.8em; text-indent: 2em; font-family: 微软雅黑, Arial, 宋体; font-size: 14px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">如果还想控制图片轮转的时间间隔，还有参数：</p><p style="margin-top: 20px; margin-bottom: 20px; padding-top: 0px; padding-bottom: 0px; line-height: 1.8em; text-indent: 2em; font-family: 微软雅黑, Arial, 宋体; font-size: 14px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">$(function(){<br style="margin: 0px; padding: 0px;" />    $('#carousel-ad').carousel({<br style="margin: 0px; padding: 0px;" />      interval: 3000<br style="margin: 0px; padding: 0px;" />    });<br style="margin: 0px; padding: 0px;" />});</p><p style="margin-top: 20px; margin-bottom: 20px; padding-top: 0px; padding-bottom: 0px; line-height: 1.8em; text-indent: 2em; font-family: 微软雅黑, Arial, 宋体; font-size: 14px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">如果设置不自动播放，还可以：</p><p style="margin-top: 20px; margin-bottom: 20px; padding-top: 0px; padding-bottom: 0px; line-height: 1.8em; text-indent: 2em; font-family: 微软雅黑, Arial, 宋体; font-size: 14px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">$('#carousel-ad').carousel({<br style="margin: 0px; padding: 0px;" />pause: true,<br style="margin: 0px; padding: 0px;" />interval: false<br style="margin: 0px; padding: 0px;" />});</p><p style="margin-top: 20px; margin-bottom: 20px; padding-top: 0px; padding-bottom: 0px; line-height: 1.8em; text-indent: 2em; font-family: 微软雅黑, Arial, 宋体; font-size: 14px; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">以上经验仅供参考：）</p>