在悬停时循环显示图像并使用上次看到的图像停止

Question

我有一堆5张图片，我在悬停时循环播放。

http://jsfiddle.net/9kxw7wpg/1/

jQuery(function($){

    // Cycle plugin
    $('.slides').cycle({
        fx:     'none',
        speed:   1,
        timeout: 500
    }).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');
    });

});

我现在想要实现的是，在mouseout上不是黑色背景应该再次可见，而是在悬停时看到的最后一个图像。

Answer 1

平凡的是，你可以删除removeClass功能。

jQuery(function($){

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

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

});

但黑色背景是由你自己的CSS引起的：

.slides{
  z-index:0;
  visibility:hidden;
}

如果你想最终删除它，那么是否有必要visibility:hidden？