自动滑动 jQuery jCarousel Lite 不工作
Posted
技术标签:
【中文标题】自动滑动 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
【讨论】:
以上是关于自动滑动 jQuery jCarousel Lite 不工作的主要内容,如果未能解决你的问题,请参考以下文章