javascript - Twitter Bootstrap - 轮播

Question

我之前在教程中做过这个并且它完美地工作，现在当我去重新创建它时它拒绝工作，我将提供代码和错误报告。

HTML：

<div class="carousel slide" id="myCarousel">
    <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>
        <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active"><img src="http://placehold.it/1200x480" alt="placeholdit"></div>
        <div class="item"><img src="http://placehold.it/1200x481" alt="placeholdit"></div>
        <div class="item"><img src="http://placehold.it/1200x480" alt="placeholdit"></div>
        <div class="item"><img src="http://placehold.it/1200x482" alt="placeholdit"></div>
    </div>
</div>

JS：（文件链接放在正文中，代码也是）

<script src="js/bootstrap.js"></script>
<script src="js/jquery.js"></script>
<script>
    $(document).ready(function() {
        $('#myCarousel').carousel({interval: 2000});
    });
</script>

错误报告：

TypeError: $ is not a function file:///C:/Users/Christopher/Desktop/Portfolio_Final/js/bootstrap.js 第29行

TypeError: $(...).carousel 不是函数 file:///C:/Users/Christopher/Desktop/Portfolio_Final/index.html#myCarousel 第 89 行

看来，它的功能不存在的报告错误，jquery版本在1.9.1

Answer 1

尝试这个

    jQuery.noConflict();
    jQuery(document).ready(function () {
        jQuery('#myCarousel').carousel({ interval: 2000 });
    });

Answer 2

Bootstrap 插件依赖于 jQuery。所以你必须先加载它。

<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
...