2

このコードを以前のテスト ページで使用していたところ、完全に機能しました。

<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>
4

1 に答える 1

2

ブートストラップと jCarouselLite など、異なる jQuery プラグインが連携して競合する可能性がありますが、スタンドアロン バージョンは正常に動作します。

  ^
  |
fiddle
于 2014-01-31T07:14:13.293 に答える