Question

当我将鼠标悬停在初始图像上时，我正在使用jQuery Cycle插件来启动图像的滑动显示。这很好用。我想要的是在幻灯片停止时停止播放，并开始手动幻灯片放映（下一个/上一个按钮）。这当前有效，但幻灯片每次初始化时都从头开始。我希望它从当前加载的图像开始。

我正在玩从DOM获取图像的索引（因为它是唯一一个显示：块）并使用选项'startingSlide'来恢复它，但我的索引仍然以-1返回。

jQuery('#home-menu li').hover(function()
{
   setImages(jQuery(this).attr('title'), jQuery(this).find('.subtitle').text());

   jQuery('#main .blog #projects .gallery .slideshow').cycle(
   {
      fx: 'scrollHorz',
      easing: 'easeOutBounce',
      speed: 2000,
      delay: 0
   });
}, function()
{
   // Before loading the images for the clickable slideshow, find the current image in the DOM array to use as the starting position
   slideshowStart = jQuery('.gallery .slideshow img:visible').index(this);
   console.log('Index: ' + slideshowStart);
   setImages(jQuery(this).attr('title'), jQuery(this).find('.subtitle').text());

   jQuery('#main .blog #projects .gallery .slideshow').cycle('stop').cycle(
   {
      fx: 'scrollHorz',
      easing: 'easeOutBounce',
      startingSlide: slideshowStart,
      speed: 2000,
      timeout: 0,
      next: "#main .blog #projects .gallery span.span2",
      prev: "#main .blog #projects .gallery span.span1"
   });
});

setImages（）只是根据li正在盘旋的内容将图像加载到DOM中。没什么特别的。

我希望图像在悬停并悬停时恢复。当我试图让它工作的时候，我已经把简历部分暂时留空了，以防你想知道。

Answer 1

问题在于悬停回调：

slideshowStart = jQuery('.gallery .slideshow img:visible').index(this);

1）首先，jQuery语句选择与选择器匹配的所有元素。循环插件确保只显示其容器中的一个图像，因此该声明选择最多一个img元素。

2）其次，index函数搜索在步骤1中选择的元素（单个img元素）以查看它是否可以找到与主题匹配的元素（提供给索引函数的参数）。在您的情况下，主题为this，在悬停回调的上下文中为jQuery(#home-menu li)。

li元素永远不会匹配img元素，因此对index()的调用将始终返回-1（对于“未找到对象”）。

要解决此问题，请修改语句，如下所示：

slideshowStart = $('.slideshow img').index($('img:visible'));

1）首先，这会选择img元素中的所有<div class='slideshow'>元素。

2）其次，它返回该列表中第一个可见img元素的索引。

Answer 2

如果您只想暂停和播放，请使用以下选项：

jQuery('#home-menu li').hover(function() {
  $("#yourSlideshow").cycle("resume");
}, function {
  $("#yourSlideshow").cycle("pause");
});

jQuery循环插件定制

2 个答案: