0

この Jcarousel プラグインをページに実装しようとしています。今では Google Chrome と IE で動作するようになりましたが、スクリプトは Firefox、Safari、Opera では動作しません。コンソールに次のエラー メッセージが返されます: TypeError: jQuery(...).jcarousel is not a function @ file:///J:/directory/index.html:31. JavaScript インクルードは以下のスニペットのとおりであることに注意してください。何らかの理由で、正しい順序で表示できませんでした 。コード:

jQuery(document).ready(function() {
    jQuery("#mycarousel").jcarousel({
        autostart: true,
        scroll: 1,
        target: 1,
        auto: 2,
        wrap: 'last',
        initCallback: mycarousel_initCallback
    });
}); 
    <!-- scrollIntoView is undefined -->
    /*$('#mycarousel').jcarousel('scrollIntoView', 2, true, function(scrolled)  {
    if (scrolled) {
        console.log('The carousel has been scrolled');
    } else {
        console.log('The carousel has not been scrolled');
    }
});*/
</script>
</head>
<body>
<div id="wrap">
<div class="jcarousel-skin-tango">
<div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;">
<div class="jcarousel-clip jcarousel-clip-horizontal" style="position: relative;">
    <ul id="mycarousel" class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px; width: 950px;">
    <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1" style="float: left; list-style: none;"><img src="images/img1.jpg" width="175" height="175" alt></li>
    <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal" jcarouselindex="2" style="float: left; list-style: none;"><img src="images/img2.jpg" width="175" height="175" alt></li>
    <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal" jcarouselindex="3" style="float: left; list-style: none;"><img src="images/img3.jpg" width="175" height="175" alt></li>
    <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal" jcarouselindex="4" style="float: left; list-style: none;"><img src="images/img4.jpg" width="175" height="175" alt></li>
    <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-5 jcarousel-item-5-horizontal" jcarouselindex="5" style="float: left; list-style: none;"><img src="images/img5.jpg" width="175" height="175" alt></li>
    <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-6 jcarousel-item-6-horizontal" jcarouselindex="6" style="float: left; list-style: none;"><img src="images/img6.jpg" width="175" height="175" alt></li>
    </ul>
</div><!-- class="jcarousel-clip jcarousel-clip-horizontal" -->
</div><!-- class="jcarousel-container jcarousel-container-horizontal" -->
</div><!-- class="jcarousel-skin-tango" -->
</div><!-- id="wrap" -->
</body>
</html>

すべてのコードをテキスト ウィンドウに表示するのに多くの問題がありました。そのため、代わりに以下のスクリプト インクルードをコピーする必要があります。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="/Animation/javascript/jquery.jcarousel.js">    </script>
<!--<script type="text/javascript" src="/Animation/javascript/jcarousel.simple.js"></script>
<script type="text/javascript" src="/Animation/javascript/jquery.jcarousel-autoscroll.js"></script>-->
  <script type="text/javascript" src="/Animation/javascript/jquery.jcarousel.min.js"> </script>
 <script type="text/javascript">
  function mycarousel_initCallback(carousel)
       {
     /* Pause autoscrolling if the user moves with the cursor over the clip.*/
     carousel.clip.hover(function() {
       carousel.stopAuto();
    }, function() {
        carousel.startAuto();
     });
    };

少し調査した結果、この問題はスクリプトを含める順序が不適切であることが原因である可能性が最も高いことがわかりました。それで、適切な順序は何ですか、それとも問題の原因は他にありますか? スクリプトは Chrome と IE でのみ機能することに注意してください。

4

0 に答える 0