autoslide jQuery jCarousel Lite无法正常工作 [英] autoslide jQuery jCarousel Lite not working

问题描述

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

 < div class ='anyClass'style ='float：left'> 
< ul class =slider_ctreid =mycarousel> 
< li class =outer_prdcts>< asp：HyperLink ID =hyp0runat =serverNavigateUrl =http://192.168.20.120/tabid/62/Gifts+++Jewellery/ HOuse + Of + Jamal + Attar / Jamal + Collection / 0 / SKU / 1016-1637-2699-0 / Default.aspx>< img class =prdct_img_bluesrc =/ Portals / _default / images / image_1。 jpgalt =''width ='100'height ='100'/>< / asp：HyperLink>< / li> 
< li class =outer_prdcts>< asp：HyperLink ID =hyp1runat =serverNavigateUrl =http://192.168.20.120/tabid/62/Gifts+++Jewellery/ HOuse + Of + Jamal + Attar / Jamal + Collection / 0 / SKU / 1016-1637-2699-0 / Default.aspx>< img class =prdct_img_bluesrc ='/ Portals / _default / images / image_2。 jpg'alt =''width ='100'height ='100'/>< / asp：HyperLink>< / li> 
< li class =outer_prdcts>< img class =prdct_img_bluesrc ='/ Portals / _default / images / image_3.jpg'alt =''width ='100'height ='100' />< /锂> 
< li class =outer_prdcts>< img class =prdct_img_bluesrc ='/ Portals / _default / images / image_4.jpg'alt =''width ='100'height ='100' />< /锂> 
< li class =outer_prdcts>< img class =prdct_img_bluesrc ='/ Portals / _default / images / image_5.jpg'alt =''width ='100'height ='100' />< /锂> 
< li class =outer_prdcts>< img class =prdct_img_bluesrc ='/ Portals / _default / images / image_6.jpg'alt =''width ='100'height ='100' />< /锂> 
< / ul> 
 
< / div> 
  

我使用jQuery jCarousel Lite来滑动这些图片。我的要求是我怎样才能停止滚动mouseover？

jQuery是：

 < script type ='text / javascript'language ='javascript'> 
 $（function（）{
 $（'。anyClass'）。jCarouselLite（{
 btnNext：'.next'，
 btnPrev：'.prev'，
 auto：200 
}）; 
 
}）; 
< / script> 
  

解决方案

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

有一个关于进行修改的讨论 to jCarousel Lite添加暂停选项。

根据对jCarousel Lite网站的评论，对未缩小的 jcarousellite.js 文件的修改为如下所示：

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

 暂停：false 
  

查找本节：

  if（o.auto）
 setInterval（function（）{ 
 go（curr + o.scroll）; 
 }，o.auto + o.speed）; 
  

将其替换为：

<$ p如果（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（）参数中，include它像这样...

 暂停：真
  

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="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>

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

jQuery is:

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

    });
   </script>

解决方案

Apparently, jCarousel Lite does not offer the pause option.

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

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

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

pause: false

Find this section:

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

And replace it with this:

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);
    });

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

pause: true

这篇关于autoslide jQuery jCarousel Lite无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！