Question

我使用jQuery创建了一个“循环”的图像，我希望它在悬停时停止，但不知道从哪里开始。循环切换图像而不会在它们之间消失，因此这不是问题。我对jQuery很陌生，虽然我已经开始掌握这个概念，但我并不擅长它。

现在脚本看起来像这样：

<script type='text/javascript'>
function cycleImages(){
      var $active = $('#cycler .active');
     var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
  $next.css('z-index',2);
  $active.fadeOut(0,function(){
  $active.css('z-index',1).show().removeClass('active');
      $next.css('z-index',3).addClass('active');
  });
}

$(document).ready(function(){
setInterval('cycleImages()', 120);

})
</script>

如果有人能解释如何从这里继续下去，我会很高兴！

Answer 1

var myTimer; 

function pauseLoop(){
    clearInterval(myTimer);
}

function startLoop(){
    myTimer = setInterval(cycleImages, 120);
}

$(document).ready(function(){
    startLoop();
    $("#cycler").hover(pauseLoop, startLoop)
})

将setInterval（）封装在函数中以启动和停止它，然后触发启动/暂停功能。

希望这可以让你前进。 :)

Answer 2

var myTimer; 

function pauseLoop(){
    clearInterval(myTimer);
}

function startLoop(){
    cycleImages();
    myTimer = setInterval(cycleImages, 120);
}

$(document).ready(function(){
    myTimer = setInterval(cycleImages, 120);
    $("#cycler").hover(pauseLoop, startLoop);
})

代码的一点mod应该这样做。在“$（document）.ready”函数中，我们只是自动启动计时器，开始播放幻灯片。然后在重新启动时，我们运行“cycleImages（）”函数，然后重新启动计时器。

获取jQuery图像交叉淡化以停止悬停？

2 个答案: