이미지가 보이지 않게 슬라이드하려면 어떻게해야합니까?

Question

저는 jquery를 처음 사용하고 있으며 이전 및 다음 이미지로 이동하는 추가 버튼이있는 간단한 회전 갤러리를 만들려고합니다.

지금은 잘 작동하지만 클래스를 제거하기 전에 맨 위의 이미지를 먼저 슬라이드하는 효과를 추가하고 싶습니다. 이미지 클래스를 전환 할 때

인덱스

<div id="container"> 
<img src="pic1.png" id="pic1" class="top-pic" alt="" /> 
<img src="pic2.png" id="pic2" alt="" /> 
<img src="pic3.png" id="pic3" alt="" /> 
<img src="pic4.png" id="pic4" alt="" /> 
</div> 

<input type="button" name="prev" id="prev" value="prev" /> 
<input type="button" name="next" id="next" value="next" /> 

CSS

#container{ 
    position:relative; 
    height:200px; 
    width:400px; 
} 
    #container img{ 
     position:absolute;top:0;left:0; 
     height:200px; 
     width:400px; 
    } 
    .top-pic{ 
     z-index:999; 
    } 

JQuery와

$('#next').click(function(){ 
    if($('#pic1').hasClass('top-pic')){ 
     $('#pic1').removeClass('top-pic'); 
     $('#pic2').addClass('top-pic'); 
     $('#pic2').animate({right:800}, {duration: 'slow', easing: 'easeOutQuad'}) 
    }else if($('#pic2').hasClass('top-pic')){ 
     $('#pic2').removeClass('top-pic'); 
     $('#pic3').addClass('top-pic'); 
    }else if($('#pic3').hasClass('top-pic')){ 
     $('#pic3').removeClass('top-pic'); 
     $('#pic4').addClass('top-pic'); 
    }else if($('#pic4').hasClass('top-pic')){ 
     $('#pic4').removeClass('top-pic'); 
     $('#pic1').addClass('top-pic'); 
    } 

}); 

$('#prev').click(function(){ 
    if($('#pic1').hasClass('top-pic')){ 
     $('#pic1').removeClass('top-pic'); 
     $('#pic4').addClass('top-pic'); 
    }else if($('#pic4').hasClass('top-pic')){ 
     $('#pic4').removeClass('top-pic'); 
     $('#pic3').addClass('top-pic'); 
    }else if($('#pic3').hasClass('top-pic')){ 
     $('#pic3').removeClass('top-pic'); 
     $('#pic2').addClass('top-pic'); 
    }else if($('#pic2').hasClass('top-pic')){ 
     $('#pic2').removeClass('top-pic'); 
     $('#pic1').addClass('top-pic'); 
    } 

}); 

function rotate(){ 
    setInterval(function(){ 
     if($('#pic1').hasClass('top-pic')){ 
     $('#pic1').removeClass('top-pic'); 
     $('#pic2').addClass('top-pic'); 
     $('#pic2').animate({right:800}, {duration: 'slow', easing: 'easeOutQuad'}) 
    }else if($('#pic2').hasClass('top-pic')){ 
     $('#pic2').removeClass('top-pic'); 
     $('#pic3').addClass('top-pic'); 
    }else if($('#pic3').hasClass('top-pic')){ 
     $('#pic3').removeClass('top-pic'); 
     $('#pic4').addClass('top-pic'); 
    }else if($('#pic4').hasClass('top-pic')){ 
     $('#pic4').removeClass('top-pic'); 
     $('#pic1').addClass('top-pic'); 
    } 
    }, 4000); 
} 
rotate(); 

그래서 나는 정상을 싶습니다

이

내가 지금까지 무엇을 가지고 이미지를 슬라이드쪽으로 먼저 시야에서 벗어나는 방법? 하지만 어떻게해야합니까? 여기

합니다 (livesearch 무시) 이미지 회전의 작업 예입니다 : 당신이 here보고에 대한 http://chrismepham.com/sites/test/livesearch.html

Answer 1

내가 아주 간단한 예제를 만들었습니다.

는 기본적으로 viewport DIV 당신이 그들에게 제시에만 이미지를 볼 수있는 사용자를 제한하지만 당신이 떠나 당신은 질문이있는 경우에는 바로

의견을주십시오 스크롤 할 수있는 imageContainer 사업부는 이미지의 가로 목록을 보유하고 있습니다.