jquery照片幻燈片

Question

我有一個圖像，當我徘徊它時，我能夠查看左，右箭頭......當我點擊一個箭頭，我正在改變圖像的源attr使用jquery ... 所以我我成功地改變了點擊箭頭上的圖像.. 我想要的是，我如何獲得幻燈片放映的感覺...當前圖像滑動右側，當左側箭頭是左側時，新圖像從左側滑動的動畫拍點擊... 請幫我這個...我不想使用已經存在的插件... 在此先感謝...

Answer 1

要做到這一點，我會有兩個塊，一個用於舊圖像，一個用於新建（兩者都用溢出隱藏）。

開始的位置：

 
    old - normal 
    new - right margin = width of image 

在動畫蜱例如每0.05秒

 
    old - left margin+1 
    new right margin-1 

，直到舊的已經滑出，新已經滑動英寸

Answer 2

我建議您使用JQuery的動畫功能。請參閱http://api.jquery.com/animate/瞭解更多信息。

Answer 3

，這是做了一個自定義動畫作品請找fiddle

$('.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'); 
});