0

我正在使用 jQueryCycle 脚本处理幻灯片时遇到问题。幻灯片由五个滑块组成：一张大幻灯片，其中图像水平移动，四张小幻灯片堆叠在一起，垂直滑动。每当主幻灯片过渡到下一张幻灯片时，垂直幻灯片都会相互同步过渡和移动，底部的小幻灯片图像与主幻灯片匹配。

当我尝试向我的垂直幻灯片添加某个功能时，我的问题就出现了。当用户单击顶部垂直幻灯片时，我希望幻灯片平滑过渡到下一张幻灯片 3 次，因此用户单击的图像现在是底部幻灯片和主幻灯片。

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 函数，但任何帮助将不胜感激！

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

4

1 回答 1

0

我以错误的方式解决这个问题。jQuery Cycle 中的幻灯片循环似乎不是一个可以重复的函数，除非您使用 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包含当前显示幻灯片的幻灯片编号。该函数继续循环到下一张幻灯片，直到两个数字匹配。

于 2012-12-13T16:08:14.313 回答