1

好的，所以我一直在尝试结合 CarouFredSel 和 jquery 自定义内容滚动器来添加与轮播一起使用的滚动条的图像。我很确定我做错了什么，因为我是 Jquery 的新手（非常非常新）。

这是脚本：

   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"  type="text/javascript"></script>
   <script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
  <script type="text/javascript" language="javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" language="javascript" src="jquery.touchwipe.1.1.1.js"></script>
    <script type="text/javascript" language="javascript" src="jquery.carouFredSel-5.5.0-packed.js"></script>

    <script type="text/javascript" language="javascript">
        $(function() {

        $("#foo3").carouFredSel({
            items   : 2,
            auto: {
                duration: 750
                },
            scroll  : {
                items: 1,
                duration: 750,
                mousewheel: true,
                wipe: true,
                pauseOnHover: true,
            onAfter: function() {
  if ( $(this).triggerHandler( "currentPosition" ) == 0 ) {
    $(this).trigger( "pause" );
  }
}},
        }).parent().css("margin", "auto");
        });

    </script>

这是html：

<div id="portfolio_gallery">
        <div class="list_carousel">

         <div id="mcs5_container">
<div class="customScrollBox">
<div class="horWrapper">
<div class="container">
<div class="content"> <p><ul id="foo3">
            <li style="width:486px"><img src="Images/SMP-3.jpg" alt="Testing description" /></li>
                <li style="width:486px"><img src="Images/SMP-6.jpg" alt="Text_2" /></li>
                <li style="width:238px"><img src="Images/SMP-4.jpg" alt="Text_6" /></li>
                <li style="width:486px"><img src="Images/SMP-2.jpg" alt="Text_3" /></li>
                  <li style="width:238px"><img src="Images/SMP-5.jpg" alt="new description" /></li>
                <li style="width:486px"><img src="Images/SMP-1.jpg" longdesc="" width="486" height="360" alt="Text_5" /></li>

          </ul>
            </p><div class="clearfix"></div>
    </div>
</div>

</div>
</div>
<div class="dragger_container">
<div class="dragger"></div>
 </div>
</div>
<!-- scroll buttons -->
<a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a>
</div>
</div>
<noscript>
<style type="text/css">
     #mcs5_container .customScrollBox{overflow:auto;}
    #mcs5_container .dragger_container{display:none;}
</style>
</noscript>

</div>
<script>
$(window).load(function() {
      $("#mcs5_container").mCustomScrollbar("horizontal",500,"easeOutCirc",1,"fixed","yes","yes",20); 
});
</script>
<script src="jquery.mCustomScrollbar.js" type="text/javascript"></script>

这是我迄今为止完成的工作的链接：http: //2938.sandbox.i3dthemes.net/index-scroll-w-bar.html - 你可以看到一切正常并且看起来像我想要的那样，但是滑块酒吧不动？

请帮忙！

4

3 回答 3

2

您应该先加载 jQuery Core，然后再加载它的 UI 库：

<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
于 2012-04-13T14:25:58.303 回答
2

您没有按预期顺序引用脚本，因此 jQuery UI 无法正确实例化，并且 mCustomScrollbar 插件不起作用。

在此处输入图像描述

第一个应该是 jQuery，然后是 jQuery UI：

<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
...
于 2012-04-13T14:26:25.027 回答
1

只需更改上面的前 6 行

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"  type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" language="javascript" src="jquery.touchwipe.1.1.1.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-5.5.0-packed.js"></script>

至以下：

<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" language="javascript" src="jquery.touchwipe.1.1.1.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-5.5.0-packed.js"></script>

请注意附加脚本文件的顺序；

jquery.js
jquery.easing.1.3.js
jquery-ui.min.js
jquery.mousewheel.js
jquery.touchwipe.1.1.1.js
jquery.carouFredSel-5.5.0-packed.js
于 2012-04-13T14:59:35.817 回答