自动滑动 jQuery jCarousel Lite 不工作

Posted 2023-05-08

【中文标题】自动滑动 jQuery jCarousel Lite 不工作

【英文标题】：autoslide jQuery jCarousel Lite not working

【发布时间】：2011-12-22 06:02:22

【问题描述】：

我有一个div，它包含这样的元素：

 <div class='anyClass' style='float:left'>
 <ul class="slider_ctre" id="mycarousel">
    <li class="outer_prdcts"><asp:HyperLink ID="hyp0" runat="server"   NavigateUrl="http://192.168.20.120/tabid/62/Gifts+++Jewelery/HOuse+Of+Jamal+Attar/Jamal+Collection/0/SKU/1016-1637-2699-0/Default.aspx"><img class="prdct_img_blue" src="/Portals/_default/images/image_1.jpg" alt='' width='100' height='100' /></asp:HyperLink></li>
    <li class="outer_prdcts"><asp:HyperLink ID="hyp1" runat="server" NavigateUrl="http://192.168.20.120/tabid/62/Gifts+++Jewelery/HOuse+Of+Jamal+Attar/Jamal+Collection/0/SKU/1016-1637-2699-0/Default.aspx"><img class="prdct_img_blue" src='/Portals/_default/images/image_2.jpg' alt='' width='100' height='100' /></asp:HyperLink></li>
    <li class="outer_prdcts"><img class="prdct_img_blue" src='/Portals/_default/images/image_3.jpg' alt='' width='100' height='100' /></li>
    <li class="outer_prdcts"><img class="prdct_img_blue" src='/Portals/_default/images/image_4.jpg' alt='' width='100' height='100' /></li>
    <li class="outer_prdcts"><img class="prdct_img_blue" src='/Portals/_default/images/image_5.jpg' alt='' width='100' height='100' /></li>
    <li class="outer_prdcts"><img class="prdct_img_blue" src='/Portals/_default/images/image_6.jpg' alt='' width='100' height='100' /></li>
 </ul>

 </div>

我正在使用 jQuery jCarousel Lite 来滑动这些图像。我的要求是如何在鼠标悬停时停止滚动？

jQuery 是：

   <script type='text/javascript' language='javascript'>
   $(function() 
    $('.anyClass').jCarouselLite(
    btnNext: '.next',
    btnPrev: '.prev',
    auto: 200
    );

    );
   </script>

【问题讨论】：

转到this page，搜索“悬停时暂停”，您会发现需要对jCarouselLite JS 文件进行代码更改以实现此目的。只有几行，所以应该很容易

好的，我会...感谢您的评论 Sparky 和 ​​Clive

Stop the jcarousel Lite animation on mouseover?的可能重复

【参考方案1】：

显然，jCarousel Lite 不提供暂停选项。

jCarousel Lite 有一个discussion here about making a modification 来添加暂停选项。

According to comments on the jCarousel Lite website，对未压缩的jcarousellite.js文件的修改如下：

将此添加到选项列表中（在o = $.extend( 行下）。

pause: false

找到这个部分：

if(o.auto)
        setInterval(function() 
            go(curr+o.scroll);
        , o.auto+o.speed);

并将其替换为：

if(o.auto)
    aktiv = setInterval(function() 
        go(curr+o.scroll);
    , o.auto+o.speed);

if(o.pause)
    div.mouseover(function() 
        clearInterval(aktiv);
    );
    div.mouseout(function() 
        aktiv = setInterval(function() 
            go(curr+o.scroll);
        , o.auto+o.speed);
    );

在您的 jCarouselLite() 参数中，像这样包含它...

pause: true

【参考方案2】：

如果您在页面上， 如果两个或多个运行 jCarouselLite， 变量o需要在aktiv中显式添加扩展对象。

o = $.extend(
    aktiv: null,
    pause: false

并且aktiv改变o.aktiv

代码前：aktiv 代码后：o.aktiv

if(o.auto)
    o.aktiv = setInterval(function() 
        go(curr+o.scroll);
    , o.auto+o.speed);

if(o.pause) 
    div.mouseover(function() 
        clearInterval(o.aktiv);
    );
    div.mouseout(function() 
        o.aktiv = setInterval(function() 
            go(curr+o.scroll);
        , o.auto+o.speed);
    );

完成：D