jquery - 平滑 jQuery 幻灯片

Question

我有一个简单的图像滑块，可以在悬停时循环播放多个图像。问题是它非常不稳定。原因是它是一个静态图像，在悬停状态之前可见，在悬停时隐藏。这使得图像周期不稳定。我只是在寻找一种方法来平滑循环。

或者我只需要找到一种方法让静态图像在悬停时消失并在鼠标离开 div/图像时重新出现。

我在下面有一个演示

JS 小提琴演示

jQuery代码

jQuery(function($){

// Cycle plugin
$('.slides').cycle({
    fx:     'none',
    speed:   1000,
    timeout: 70
}).cycle("pause");

// Pause & play on hover
$('.slideshow-block').hover(function(){
    $(this).find('.slides').addClass('active').cycle('resume');
}, function(){
    $(this).find('.slides').removeClass('active').cycle('pause');
});

});

静态图像在 css 中的第 20 行

Answer 1

照你说的做，在悬停时隐藏图像，然后再次显示图像似乎可以解决问题。

jQuery(function($){

// Cycle plugin
$('.slides').cycle({
    fx:     'none',
    speed:   1000,
    timeout: 70
}).cycle("pause");

// Pause & play on hover
  $('.slideshow-block').hover(function(){
      $(this).find('.link').hide();
    $(this).find('.slides').addClass('active').cycle('resume');
  }, function(){
      $(this).find('.link').show();
      $(this).find('.slides').removeClass('active').cycle('pause');
  });

});

http://jsfiddle.net/WCTX8/2/