.animate()가 마지막 사진에 도달하면 중지하는 방법?

Question

다음에 슬라이드하려면 다음 버튼을 클릭하면 왼쪽의 마지막 사진과 함께 슬라이드되고 멈추지 만 여기가 내 문제입니다.

첫 번째 : 갤러리의 오른쪽에있는 마지막 그림을 멈추고 싶습니다. 내 코드에서 모든 마지막 그림을 슬라이드하고 숨기기 때문에 마지막 그림으로 갤러리를 채 웁니다.

둘째 : 끝까지 버튼을 계속 클릭하면 슬라이드가 계속되지 않으므로 계속 슬라이드됩니다.

3 단계 : 올바른 너비로 이미지를 슬라이드하고 싶습니다. 어떻게 코딩 할 수 있습니까? 여기

여기

$("#right").click(function(){ 
    if($(".block:last").offset().left <= 0) 
     {return;} 
    else { 
     $(".block").animate({ 
      left: "-=110px" 
     } , "slow"); 
    } 
}); 


$("#left").click(function(){ 
    if($(".block").offset().left >= 0) 
     {return;} 
    else { 
     $(".block").animate({ 
      left: "+=110px" 
     } , "slow"); 
    } 
});  

데모입니다

``« 왼쪽 이전 HTML 코드 내 JQUERY 여기

<button id="right">&raquo; right next</button> 

<div class="wrap"> 
<div class="gallery"> 

<div class="item"> 
<img src="photos/1.jpg" class="block" id="black"> 
</div> 


<div class="item"> 
<img src="photos/2.jpg" class="block" id="black"> 
</div> 
</div><!-- .gallery --> 
    </div> <!-- wrap --> 

그리고이지만 jsfiddle이 아니라 브라우저에서 제대로 실행 나던 그것은 작동한다. http://jsfiddle.net/4bhL6p05/

Answer 1

jsfiddle의 경우 종속성 (왼쪽 열에)으로 jQuery를 추가해야합니다. 이 모든 마지막 사진을 슬라이드 모두 숨 깁니다

가 마지막 사진과 함께 갤러리를 채우고, 그래서 나는 갤러리의 오른쪽에 마지막 사진을 중지 할 때문에 내 코드 : 귀하의 질문에 대해서는

.

.gallery 요소의 너비를 오프셋에서 뺄 필요가 있으므로 화면에서 움직이지 않습니다. 이런 식으로 뭔가 :

var g = $('.gallery').width(); 

$("#right").click(function(){ 
    if(($(".block:last").offset().left - g) <= 0) { 
     ... logic 
    } 

업데이트 바이올린 : http://jsfiddle.net/4bhL6p05/10/

---

편집 : 여기 간단한 설명입니다! 솔직히, 바이올린은 원본과 크게 다르지 않습니다. 내가 한 유일한 것은 "끝"위치를 계산하는 것이 었습니다. 첫째, 이미지 시각화하는 데 도움 :

각 블랙 박스 아래의 보라색 텍스트가 left 오프셋 위치입니다.

요소가 시작 위치에있는 경우 첫 번째 요소의 오프셋은 0입니다. 마지막 이미지 (이 예에서는)는 400px의 오프셋을 갖습니다 (각 요소는 100px이므로) .

이제 사용자가 오른쪽을 클릭하면 오프셋을 뺍니다. 0의 오프셋을 검사하면 최종 이미지가 STARTING 위치 (맨 왼쪽)에있게됩니다. 따라서 원래 코드에서 최종 이미지가 화면에서 사라지는 것입니다 (그러나 요소를 검사하면 화면 밖으로 나가고 애니메이션이 멈추는 것을 볼 수 있습니다).

We 마지막 이미지가 오른쪽에 있도록하려면 "끝"오프셋을 계산해야합니다.컨테이너의 너비를 잡고 오프셋을 뺍니다.

코드를 향상 시키려면 (또는 첫 번째 이미지 시작 방법과 비슷한 방식으로 마지막 이미지를 "플러시"하고 싶다면) 최종 이미지와 요소 폭의 차이를 계산할 수 있습니다. 그리고 움직일 거리. 이를 바탕으로 애니메이션의 양을 변경할 수 있습니다.

이 정보가 도움이되기를 바랍니다.

Answer 2

코드를 약간 재 작성하여 오프셋을 사용하는 대신 슬라이드 위치를 추적하는 변수 'current_pic'을 사용합니다. 코드를 설명하기 위해 여러 가지 주석을 남겼습니다.

JS/jQuery 코드 :

<script> 
    // it's always a good practice to wait until the document loads and then execute your js/jquery code 
    $(document).ready(function() { 
     // this variable keeps track of the current image displayed 
     var current_pic = 0; 
     // this variable is used to stop the slideshow at the last image 
     var pic_count = $(".gallery > div").length; 
     // my test images had a different width that your, so I used this variable to ensure that they get animated correctly 
     // this works only if all the images have the same width 
     var pic_width = $(".block").width(); 

     $("#right").click(function(){ 
      // if the expression was 'current_pic >= pic_count', the slideshow would slide past the last image and then stop 
      // by decrementing 1 from the pic_count, you ensure that the slideshow stops at the last image 
      if(current_pic >= pic_count-1) 
       {return;} 
      else { 
       // the slideshow shifts one slide forward -> add 1 to current_pic 
       current_pic++; 
       $(".block").animate({ 
        left: "-=" + pic_width 
       } , "slow"); 
      } 
     }); 


     $("#left").click(function(){ 
      // this ensures that the slideshow doesn't shift past the first image 
      if(current_pic <= 0) 
       {return;} 
      else { 
       // the slideshow shifts one slide backwards -> decrement 1 from current_pic 
       current_pic--; 
       $(".block").animate({ 
        left: "+=" + pic_width 
       } , "slow"); 
      } 
     }); 
    }); 
</script> 

CSS 코드 :

<style> 
    body { 
     margin: 0px; 
    } 
    #black { 
     height: 90px; 
     position: relative; 
    } 
    .block { 
     float: left; 
    } 
</style> 

HTML 코드는 바이올린과 동일합니다

jQuery 라이브러리를 포함하는 것을 잊지 마십시오

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>