0

jQueryCycleスクリプトを使用して作業しているスライドショーに問題があります。スライドショーは5つのスライダーで構成されています。画像が水平方向に移動する大きなスライドと、垂直方向にスライドする4つの小さなスライドが積み重ねられています。メインスライドが次のスライドに移行するたびに、垂直スライドはすべて移行し、互いに同期して移動します。下部の小さなスライド画像はメインスライドと一致します。

垂直方向のスライドに特定の機能を追加しようとすると、問題が発生します。ユーザーが上の垂直スライドをクリックすると、スライドショーが次のスライドにスムーズに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);
}

上部の垂直スライドでこれをテストすると、選択したスライドにスキップする前に2秒間待機し、3つではなく1つのスライド遷移のみが表示されます。ロジックに欠陥があるのか​​、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には、現在表示されているスライドのスライド番号が含まれています。この関数は、2つの数値が一致するまで、次のスライドに循環し続けます。

于 2012-12-13T16:08:14.313 に答える