我有一个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>
最佳答案
显然,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