Question

我正在尝试将此Jcarousel插件实现到页面中;现在我已经在谷歌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。

jcarosel不在多个浏览器中工作

0 个答案: