【发布时间】:2012-02-15 22:26:54
【问题描述】:
我刚刚为一个网站制作了一个滑块,当触发鼠标悬停事件时,它带有一个寻呼机改变幻灯片。我正在使用 jQuery 循环插件版本 2.99
问题是在使用 pagerEvent 'mouseover' 时淡入淡出效果消失了。
我不知道是什么问题,因为当我将 pagerEvent 更改为单击淡入淡出效果时,效果正常。
有人可以帮忙吗?
谢谢!
javascript代码:
function initSlideshow() {
$('#slides')
.before('<div id="nav">')
.cycle({
timeout: 0,
speed: 1500,
pager: '#nav',
pagerEvent: 'mouseover', // name of event which drives the pager navigation
pauseOnPagerHover: true
});
}
HTML:
<div id="slider_wrapper">
<div id="nav">
<a id="slide_1" href="#" class="">Dakkapellen</a>
<a id="slide_2" href="#" class="">Dakkapellen</a>
<a id="slide_3" href="#" class="">Dakkapellen</a>
<a id="slide_4" href="#" class="">Dakkapellen</a>
</div>
<div id="slides">
<div class="slide">
<div class="image"><img src="images/sfeer/sfeer_01.jpg" alt="" /></div>
<div class="title">Dakkapel al vanaf</div>
<a href="#" title=""></a>
</div>
<div class="slide">
<div class="image"><img src="images/sfeer/sfeer_02.jpg" alt="" /></div>
<div class="title">Dakvenster vanaf</div>
<a href="#" title=""></a>
</div>
<div class="slide">
<div class="image"><img src="images/sfeer/sfeer_03.jpg" alt="" /></div>
<div class="title">Nieuwe zolder in één week</div>
<a href="#" title=""></a>
</div>
<div class="slide">
<div class="image"><img src="images/sfeer/sfeer_04.jpg" alt="" /></div>
<div class="title">Rente fiscaal aftrekbaar!</div>
<a href="#" title=""></a>
</div>
</div>
</div>
希望这会有所帮助!
【问题讨论】:
-
您能给我们一些代码示例或您的页面的演示吗? jsfiddle 也许?
-
我唯一能想到的是,您将幻灯片本身用作寻呼机。需要一个“有效”的例子。
-
我推测动画将通过 mouseover 事件更改对象的定义,结果会再次触发 mouseover,永久重新启动动画。只是没有代码的猜测。
-
嗨,我发布了一些代码。 jsFiddle是不可能用的,因为里面的js很多。工作示例也很困难,因为它不允许链接到我们的开发服务器。再次感谢!
-
如果将
pauseOnPagerHover选项更改为false会发生什么?
标签: javascript jquery slider jquery-cycle