jquery - jqueryフォトスライド

Question

私は画像を持っています、それにカーソルを合わせると左右の矢印を見ることができます...矢印をクリックするとjqueryを使用して画像のソース属性を変更しています...だから私は画像を変更することに成功しています矢印をクリックします。スライドショーの感触をどのように取得しますか...左矢印をクリックすると、現在の画像が右にスライドし、新しい画像が左からスライドするアニメーションパット...助けてくださいこれ...既存のプラグインを使いたくない...よろしくお願いします...

Answer 1

これを行うには、古いイメージ用と新しいイメージ用の 2 つのブロックを用意します (両方ともオーバーフロー非表示)。

開始位置:

  古い - 通常
  new - 右余白 = 画像の幅

アニメーション ティックで、たとえば 0.05 秒ごと

  old - 左余白+1
  新しい右マージン-1

古いものが滑り落ち、新しいものが滑り込むまで。

Answer 2

JQueryのアニメーション機能を使用することをお勧めします。詳細については、http：//api.jquery.com/animate/を参照してください。

Answer 3

これは完成したカスタムアニメーション作品ですフィドルを見つけてください

    $('.arrowRight').on('click', function(e) {
    var currLandscape = $(this).siblings(".currImg");
    var prevLandscape = currLandscape.prevAll(".hiddenImg").first();

    var currDesc= $(".currDesc");
    var prevDesc= currDesc.prevAll(".hiddenDesc").first();

    if (prevLandscape.length == 0) {
        prevLandscape = currLandscape.siblings('.hiddenImg').last();
    }
    if (prevDesc.length == 0) {
        prevDesc= currDesc.siblings('.hiddenDesc').last();
    }

    prevLandscape.show("slide", { direction: "right" }, 400, function() {
        currLandscape.hide("slide");
    });

    currDesc.fadeOut().removeClass('currDesc').addClass('hiddenDesc');
    prevDesc.fadeIn().removeClass('hiddenDesc').addClass('currDesc');

    currLandscape.removeClass('currImg').addClass('hiddenImg');
    prevLandscape.removeClass('hiddenImg').addClass('currImg');
});


$('.arrowLeft').on('click',function(e) {
    var currLandscape = $(this).siblings(".currImg");
    var nextLandscape = currLandscape.nextAll(".hiddenImg").first();

    var currDesc= $(".currDesc");
    var nextDesc= currDesc.nextAll(".hiddenDesc").first();

    if (nextLandscape.length == 0) {
        nextLandscape = currLandscape.siblings('.hiddenImg').first();
    }
    if (nextDesc.length == 0) {
        nextDesc= currDesc.siblings('.hiddenDesc').first();
    }

    nextLandscape.show("slide", { direction: "left" }, 400, function() {
        currLandscape.hide("slide");
    });

    currDesc.fadeOut().removeClass('currDesc').addClass('hiddenDesc');
    nextDesc.fadeIn().removeClass('hiddenDesc').addClass('currDesc');

    currLandscape.removeClass('currImg').addClass('hiddenImg');
    nextLandscape.removeClass('hiddenImg').addClass('currImg');
});