当悬停在初始图像上时,我正在使用 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 中。那里没什么特别的。
我希望在悬停和悬停时恢复图像。当我试图让它工作时,我暂时忽略了简历部分以悬停 - 以防你想知道。