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 回答