Question

好的，所以我一直在尝试将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 - 您可以看到一切正常并且看起来像我想要的方式，但滑块不会移动？

帮助......拜托！

Answer 1

您应首先加载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>

Answer 2

您没有按预期的顺序引用脚本，因此jQuery UI无法正确实现，并且mCustomScrollbar插件无法正常工作。

enter image description here

第一个应该是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>
...

Answer 3

只需更改上面的前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

结合两个Jquery插件：不工作

3 个答案: