jQuery循环插件定制

Question

当鼠标悬停在初始图像上时，我正在使用 jQuery Cycle 插件启动图像幻灯片。这工作正常。之后我想要的是让幻灯片在悬停时停止，并开始手动幻灯片（下一个/上一个按钮）。这目前有效，但幻灯片每次初始化时都会从头开始。我希望它从当前加载的图像开始。

我正在尝试从 DOM 中获取图像的索引（因为它是唯一具有 display:block 的图像）并使用选项“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 元素），看看它是否可以找到与 subject 匹配的元素（提供给索引函数）。在您的情况下，主题是this，在悬停回调的上下文中是jQuery(#home-menu li)。

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

要解决这个问题，请像这样修改语句：

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

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

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

Answer 2

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

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