使用jQueryCycle在一行中循环多个幻灯片

Question

我使用jQueryCycle脚本制作的幻灯片有问题。幻灯片由五个滑块组成：一个大幻灯片，图像水平移动，四个小幻灯片叠放在一起，垂直滑动。每当主幻灯片转换到下一张幻灯片时，垂直幻灯片都会相互同步地转换和移动，底部的小幻灯片图像与主幻灯片匹配。

当我试图在垂直幻灯片中添加某个功能时，我的问题就出现了。当用户点击顶部垂直幻灯片时，我希望幻灯片能平滑地过渡到下一张幻灯片三次，所以用户点击的图像现在是底部幻灯片和主幻灯片。

for (var i=0; i < 3; i++) {
setTimeout(function() {
$('#slides').cycle('next');
$('#slideh1').cycle('next');
$('#slideh2').cycle('next');
$('#slideh3').cycle('next');
$('#slideh4').cycle('next');
}, 2000);
}

当我在顶部垂直幻灯片上测试时，它会等待两秒钟，然后跳到所选幻灯片，只显示一个幻灯片转换，而不是三个。我不知道我的逻辑是否有缺陷，或者我是否没有正确使用setTimeout函数，但如果有任何帮助，我们将不胜感激！

完整的测试代码可以在这里找到。

Answer 1

我做这件事的方式不对。jQueryCycle中的幻灯片放映循环似乎不是一个可以重复的函数，除非您使用after回调。

jQuery('#slides').cycle({
fx:     transitionMain
,autostop: autoS
,speed: delayMain
,delay: -'0'
,timeout: timeO
//,pause: '0'
,continuous: isContinuous
,easeIn: eas
,easeOut: eas
,speedIn: transitionSpeed
,speedOut: transitionSpeed
,synch: 'true'
,after: mainSlideNum
,startingSlide: mainStartSlide
});

对于我的主幻灯片，我调用mainSlideNum函数作为我的后回调。

function mainSlideNum(curr,next,opts) {
var totalSlides = opts.slideCount;
if (opts.currSlide == 0) {
cSlideMain = (totalSlides)
} else {
cSlideMain = opts.currSlide; }
$('#slides').attr('curSlideNumber', cSlideMain);
//If vertical slides are clicked, checks to see if the clicked slide matches the current slide. Continues to cycle until it matches.
if (clickedSlide != cSlideMain && clickedSlide != null) {
nextSlide();
}   
if (clickedSlide == cSlideMain) { //ends the slide cycling
clickedSlide = null;
initializeValues();
changeSlideOptions();   
}
}

变量clickedSlide是指垂直滚动幻灯片的单击幻灯片编号，cSlideMain包含当前显示幻灯片的幻灯片编号。函数继续循环到下一张幻灯片，直到两个数字匹配为止。