【问题标题】:jQuery cycle fade effect an mouseoverjQuery循环淡入淡出效果鼠标悬停
【发布时间】: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 &eacute;&eacute;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


【解决方案1】:

我使用您的代码 at this fiddle 重新创建了一个滑块。它适用于您发布的代码。我假设您已经省略了 pagerAnchorBuilder 参数的代码。我认为问题在于您可能有一个事件侦听器,它正在捕获鼠标悬停事件并可能通过返回 false 或其他内容来停止传播。这个问题看起来肯定来自其他地方。

【讨论】:

  • 啊,我想我找到了问题所在。寻呼机中的文本正在被 Cufon 替换。当我将 Cufon 悬停时,它不起作用,当我禁用时,它确实起作用。应该在发帖前检查一下,对不起。感谢大家的帮助!
猜你喜欢
  • 1970-01-01
  • 2013-08-31
  • 2011-01-25
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-03-26
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多