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函数，但是非常感谢任何帮助！

可以找到完整的测试代码here。

Answer 1

我正以错误的方式解决这个问题。 jQuery Cycle中的幻灯片循环似乎不是您可以重复的功能，除非您使用后回调。

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包含当前显示幻灯片的幻灯片编号。该功能继续循环到下一张幻灯片，直到两个数字匹配。

使用jQueryCycle连续循环多个幻灯片

1 个答案: