jquery photo slide

Question

이미지가 있습니다. 왼쪽 화살표와 오른쪽 화살표를 볼 수 있습니다 ... 화살표를 클릭하면 jquery를 사용하여 이미지의 소스 attr을 변경하고 있습니다 ... 그래서 i 화살표를 클릭하면 이미지를 변경하는 데 성공했습니다. 내가 원하는 것은 슬라이드 쇼 느낌을 어떻게 얻습니까? 현재 이미지가 오른쪽으로 슬라이드되고 왼쪽 화살표가 왼쪽에서 새 이미지가 슬라이드하는 애니메이션 팻 클릭 ... 제발 도와주세요 ... 이미 기존 플러그인을 사용하고 싶지 않습니다 ... 미리 감사드립니다 ...

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

을 찾아주십시오한다