使用 jCarouselLite 时出现 JavaScript 运行时错误答案

【问题标题】：JavaScript runtime error when using jCarouselLite使用 jCarouselLite 时出现 JavaScript 运行时错误
【发布时间】：2014-01-31 05:38:14
【问题描述】：

我之前在测试页中使用过这段代码，它运行良好，

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="jQuery/jquery-1.11.0.js"></script>
<script src="jQuery/jcarousellite_1.0.1.min.js"></script>

<script>
    $(function () {
        var myCounter = $('li').length;
        $(".nonCircular .carousel").jCarouselLite({
            btnNext: ".next",
            visible: 1,
            circular: false
        });
        var counter = 0;
        $('.next').on('click', function () {
            counter = counter + 1;
            if (counter == myCounter)
                window.location.href('Fraga.aspx');
        });
    });
</script>

但是当我将代码复制并粘贴到最后一页时，它一直抛出此错误..

JavaScript runtime error: Object doesn't support property or method 'jCarouselLite'

我之前在使用另一个插件时遇到了这个错误，但那是因为我忘记添加一个部分，但这是测试页面中的确切代码，我将脚本放在同一区域，所以它应该可以工作当我复制并粘贴代码时。但事实并非如此。

这是我的标记...

<div class="nonCircular">
     <div class="carousel">
         <ul>
              <li><img src="images/1.png" height="400" alt=""></li>
              <li><img src="images/2.png" width="600" height="400" alt=""></li>
              <li><img src="images/3.png" width="600" height="400" alt=""></li>
              <li><img src="images/4.png" width="600" height="400" alt=""></li>
         </ul>
     </div>
 </div>

这是我的 .next 标记

<div style="width:50px; height:50px; background:#f00;" class="next"></div>

【问题讨论】：

这不是一个解决方案，但是为什么你同时包含jquery 1.10.2和1.11.0呢？并粘贴你的html，请
这是一个很好的问题，我想是为了以防万一我无法访问互联网，所以我将它添加到那里作为故障保护。
你最好只使用其中一个。存储在您的服务器上，如果您不确定您的互联网连接
您确定没有忘记将 jcarousellite_1.0.1.min.js 复制到您的服务器吗？
我对 jQuery 还是比较陌生，所以我会记住你的建议。至于我的问题，知道为什么它会在一个项目中起作用而不在另一个项目中起作用吗？

标签： jquery jquery-plugins jcarousellite

【解决方案1】：

不同的 jQuery 插件一起工作时可能会发生冲突，例如bootstrap 和 jCarouselLite，而 standalone version 工作正常

  ^
  |
fiddle

【讨论】：