0

我正在尝试将此 Jcarousel 插件实现到页面中；现在我已经让它在谷歌浏览器和 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