2

画像スライダーのスライドで画像を変更 する必要があります。

各スライドには、3 秒後に変化する2 つの画像が含まれています。

したがって、スライドには最初の画像が表示され、3 秒後に最初の画像が 2 番目の画像に変更され、さらに 3 秒後 (合計 6 秒) に現在のスライドが移動し、次のスライドが表示されます。

私の考えは、setTimeOut関数を使用し、3 秒ごとに別の画像を呼び出すことです。そのため、3 秒後fadeOut()に最初の画像とfadeIn()2 番目の画像が表示されます。

私はcycle2cycle-afterとそのcycle-beforeイベントを使ってこれを試しました:

$('.slide .center img:nth-child(2)').hide(); // hide all slides second images

$('#slides').cycle({
    fx: 'scrollHorz',
    slides: '>.slide',
    timeout: 6000,
    prev: '#prev',
    next: '#next'
});

$('#slides').on('cycle-before', function(event, optionHash){
    setTimeout(function(){
         $('.slide:eq('+optionHash.currSlide+') > .center > img:first-child').fadeOut(1000);
         console.log($('.slide:eq('+(optionHash.currSlide)+')').attr('slideNum'));
    },1000)

    setTimeout(function(){
        $('.slide:eq('+optionHash.currSlide+') > .center > img:nth-child(2)').fadeIn();
        console.log($('.slide:eq('+(optionHash.currSlide)+')').attr('slideNum'));
    },2000)
});

$('#slides').on('cycle-after', function(event, optionHash, outgoingSlideEl, incomingSlideEl, forwardFlag) {
    $('.center img:first-child',outgoingSlideEl).show();
    $('.center img:nth-child(2)',outgoingSlideEl).hide();
});

JSFiddle

しかし、これは私が期待したようには機能しません。それは画像を変更せず、壊れてnextボタンをprev押します。コンソールが表示される場合は、current slide.

どんな助けでも大歓迎です。

4

2 に答える 2

3

JavaScript によって生成された HTML コードを調べると、Cycle2 によって最初のスライドが複製され、非表示になっていることがわかります。この理由は私にはわかりませんが、少なくとも簡単に回避できます。

次に、 でフェードイン/フェードアウト アニメーションをトリガーする必要がありますcycle-after。でこれを行うとcycle-before、setTimeoutスライドショーがまだ次のスライドに移行している間にカウンターが開始されます。もう 1 つの問題は、 incycle-afterがoptionHash.currSlide前のスライドに設定されていることです...

これらすべての問題を回避するには、現在表示されているスライドのインデックスを次のように計算する必要があります。

var visibleSlide = ((optionHash.currSlide + 1) % optionHash.slideCount) + 1;

壊れた前/戻るボタンに関しては、ボタンの 1 つがクリックされたときにフェードイン/フェードアウト アニメーションを完全に停止し、リセットするだけで十分なはずです。ただし、前のボタンをクリックすると、インデックスの計算を調整する必要があります (-1の代わりに+1、以下のコードを参照してください)。

さらに、スライドショーの初期化直後に、最初のスライドのフェードイン/フェードアウト アニメーションを「手動で」トリガーする必要があります。これを行うにはcycle-initialized、 のロジックと組み合わせたイベントを使用できますcycle-after。

コードは 1,000 語以上を表していると思うので、ここに私の提案を示します。

$(".slide img:nth-child(2)").hide();

// Workaround for first slide right after initialization
// Handler has to be set before initialization, otherwise it might never be called!
$("#slides").on("cycle-initialized", function(event, optionHash){
    // Pretend the slideshow just transitioned from the last slide to the first
    onCycleAfter(optionHash.slideCount-1, optionHash.slideCount);
});

$("#slides").cycle({
    fx: "scrollHorz",
    slides: ".slide",
    timeout: 6000,
    prev: "#prev",
    next: "#next"
});

var timeout, prevClicked = false;
$("#slides").on("cycle-after", function(event, optionHash){
    onCycleAfter(optionHash.currSlide, optionHash.slideCount);
});

$("#slides").on("cycle-prev", function(){
    prevClicked = true;
});

function onCycleAfter(currSlide, slideCount) {
    // Reset slides
    $(".slide img:first-child").show();
    $(".slide img:nth-child(2)").hide();

    // Reset animation
    clearTimeout(timeout);
    $(".slide img").finish();

    // Calculate current slide (with workaround for prev button)
    var visibleSlide;
    if (prevClicked) {
        visibleSlide = ((currSlide - 1 + slideCount) % slideCount) + 1;
        prevClicked = false;
    }
    else {
        visibleSlide = ((currSlide + 1) % slideCount) + 1;
    }

    // Trigger new animation
    timeout = setTimeout(function(){
        var slideImages = $(".slide").eq(visibleSlide).find("img");
        slideImages.eq(0).fadeOut(1000, function(){
            slideImages.eq(1).fadeIn(1000);
        });
    }, 1000);
}

デモ(JSFiddle)

于 2013-10-27T14:58:57.047 に答える
0

編集：

currSlide は問題ないようですが、setTimeOut による競合状態のために名前が間違っています。このフォークを参照してください: http://jsfiddle.net/pMX7D/3/

私が得た出力：

1=> fadeIN /_display/ (line 63)
second /_display/ (line 56)
2=> fadeOut /_display/ (line 57)
second /_display/ (line 62)
2=> fadeIN 

// 3 never gets focus

オリジナル

それは働いています。前のボタンと次のボタンをランダムにクリックした後のコンソールからの出力:

// first or second = slide data I beileve
[cycle2] --c2 init--
jquery....min.js (line 7) 
first
/vucko...5/show/ (line 56)
first
/vucko...5/show/ (line 61)
[cycle2] cycle-next
jquery....min.js (line 7)
first
/vucko...5/show/ (line 56)
[cycle2] cycle-next
jquery....min.js (line 7)
first
/vucko...5/show/ (line 61)
second
/vucko...5/show/ (line 56)
[cycle2] cycle-prev
jquery....min.js (line 7)
second
/vucko...5/show/ (line 61)
[cycle2] cycle-prev
jquery....min.js (line 7)
first
/vucko...5/show/ (line 56)
second

私が使用している: windows の Firefox 16.0.2。

于 2013-10-25T09:43:40.727 に答える