自动滑动 jQuery jCarousel Lite 不工作工作、jQuery、jCarousel、Lite

由网友(入我襟怀)分享简介:我有一个 div,它包含这样的元素:I have a div and it contains elements like this:
  • 我有一个 div,它包含这样的元素:

    I have a div and it contains elements like this:

     <div class='anyClass' style='float:left'>
     <ul class="slider_ctre" id="mycarousel">
        <li class="outer_prdcts"><asp:HyperLink ID="hyp0" runat="server"   NavigateUrl="https://p.xsw88.cn/allimgs/daicuo/20230907/6592.png.jpg" alt='' width='100' height='100' /></asp:HyperLink></li>
        <li class="outer_prdcts"><asp:HyperLink ID="hyp1" runat="server" NavigateUrl="https://p.xsw88.cn/allimgs/daicuo/20230907/6593.png.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 来滑动这些图像.我的要求是如何在鼠标悬停时停止滚动?

    I am using jQuery jCarousel Lite to slide these images. My requirement is how can I stop its scrolling on mouseover?

    jQuery 是:

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

    推荐答案

    显然,jCarousel Lite 不提供暂停选项.

    Apparently, jCarousel Lite does not offer the pause option.

    这里有一个关于修改的讨论jCarousel Lite 添加暂停选项.

    There is a discussion here about making a modification to jCarousel Lite to add a pause option.

    根据评论在jCarousel Lite网站上,对未缩小的jcarousellite.js文件的修改如下:

    According to comments on the jCarousel Lite website, the modifications to the un-minified jcarousellite.js file are as follows:

    将此添加到选项列表中(在 o = $.extend({ 行下).

    Add this to the list of options (under the o = $.extend({ line).

    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() 参数中,像这样包含它...

    Within your jCarouselLite() parameters, include it like this...

    pause: true
    
  • 阅读全文

    相关推荐

    最新文章