0

私はクライアントのためのスライダーに取り組んでいます。彼はすでにほとんどの作業を行っていますが、フェードアウトやフェードインではなく、スライドをクロスフェードにする方法を見つける必要があります。彼は本当にコードのベースを維持したいと思っています。

これがフィドルです。

jQueryは次のようになります：

$('.slider .slide:first').addClass('active').fadeIn(200);

function rotate(index) {
     $('.slider .slide.active').removeClass('active').fadeOut(200, function() { 
         $('.slider .slide:eq(' + index + ')').addClass('active').fadeIn(200);
     });   
}

$('.slider-nav li a').click(function() {    
    var index = $(this).parent().index('li');
    rotate(index);
    return false;
});

setInterval(function() {
    var $next = $('.slider .slide.active').next();

    if ($next.length == 0)
        $next = $('.slider .slide:first');

    rotate($next.index());
}, 2000);​

このコードを保持したまま、画像をクロスフェードにするためにコードを変更する必要があります。jQuery Cycleのようなプラグインがあることは知っていますが、クライアントのコードを保持して変更する必要があります。

ありがとうございました！

4

2 に答える 2

1

私は次のような関数をうまく使用しています：

function crossfade() {
   $(".slide").first().appendTo('.slider').fadeOut(200,'linear');
   $(".slide").first().fadeIn(200,'linear');
   setTimeout(crossfade, 2000);
}

$(function(){
    $(".slide").first().fadeIn(200);
    setTimeout(crossfade,2000);
});
于 2012-09-07T18:17:35.023 に答える
0

スライドを絶対位置1に配置し、コンテナ内で他の位置に配置する必要があります。

次に、機能を変更します

function rotate(index) {
    $('.slider .slide.active').removeClass('active').animate({'opacity' : 0});
    $('.slider .slide:eq(' + index + ')').addClass('active').animate({'opacity' : 1});
}
于 2012-09-07T18:16:17.357 に答える