鼠标悬停时淡出 jQuery 幻灯片闪烁/队列问题 (slideSwitch.js)

发布于 2024-09-12 03:40:05 字数 1109 浏览 4 评论 0原文

我改编了 Jon Raasch 的 slideSwitch.js 教程 中的代码,其中基本上是一个褪色的幻灯片。该脚本将“活动”幻灯片提升到更高的 z-index,并设置不透明度动画以实现淡入淡出效果。

它工作正常,添加了暂停以在鼠标悬停时暂时停止幻灯片放映。

我遇到的问题是,当我反复将鼠标悬停在幻灯片上/移开幻灯片时,我试图阻止脚本排队。当这种情况发生时,它会闪烁并变得狂暴。

我已经尝试过 stop() 但没有让它正常工作。

有人可以建议我在下面的代码中插入这个吗?或者如果我以错误的方式处理这件事!

干杯

卢克

function slideSwitch() {
var $active = $('#hp-featured div.active');
if ( $active.length == 0 ) $active = $('#hp-featured div:last');
var $next =  $active.next().length ? $active.next()
    : $('#hp-featured div:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}
$(function() {
    var playSlideshow =  setInterval( "slideSwitch()", 5000 ); 
 $('#hp-featured div').hover(function() {
     clearInterval(playSlideshow);
  },
  function() {
      playSlideshow =  setInterval( "slideSwitch()", 5000 );
  });
});

I've adapted code from the slideSwitch.js tutorial by Jon Raasch, which is basically a fading slideshow. The script promotes the 'active' slide to a higher z-index and animates the opacity for a fading effect.

It's working fine with a pause added to stop the slideshow temporarily on mouseover.

The issue I'm having is I'm trying to stop the script from queuing up when repeatedly mousing over/off the slideshow. When this happens it flickers and goes berserk.

I've experimented with stop() but haven't got it working properly.

Can someone advise me where to insert this in the following code? Or if I am going about it the wrong way!!

Cheers

Luke

function slideSwitch() {
var $active = $('#hp-featured div.active');
if ( $active.length == 0 ) $active = $('#hp-featured div:last');
var $next =  $active.next().length ? $active.next()
    : $('#hp-featured div:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}
$(function() {
    var playSlideshow =  setInterval( "slideSwitch()", 5000 ); 
 $('#hp-featured div').hover(function() {
     clearInterval(playSlideshow);
  },
  function() {
      playSlideshow =  setInterval( "slideSwitch()", 5000 );
  });
});

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

却一份温柔 2024-09-19 03:40:05

好吧,我解决了这个问题,问题不在代码中,而在于父“幻灯片”div 中嵌套了一个额外的 div。该函数同时触发了它们并造成了混乱。

干杯

Ok I solved this one, the problem was not in the code but in the fact that there was an additional div nested inside the parent 'slide' div. The function was firing off both of them and causing the mayhem.

Cheers

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文