0

当悬停在初始图像上时，我正在使用 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 中。那里没什么特别的。

我希望在悬停和悬停时恢复图像。当我试图让它工作时，我暂时忽略了简历部分以悬停 - 以防你想知道。

4

2 回答 2

0

问题在于悬停回调：

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

1) 首先，jQuery 语句选择所有匹配选择器的元素。循环插件确保仅显示其容器内的一个图像，因此此语句最多选择一个img元素。

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

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

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

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

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

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

于 2009-11-09T02:45:09.820 回答
0

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

jQuery('#home-menu li').hover(function() {
  $("#yourSlideshow").cycle("resume");
}， 功能 {
  $("#yourSlideshow").cycle("pause");
});
于 2010-01-19T23:30:51.463 回答