목록이 끝이나 시작에 부딪 힐 때 내 슬라이드 쇼에서 화살표를 제거하는 방법

Question

내 페이지에 슬라이드 쇼가 있습니다. 5 가지 항목이 있습니다. 나는이 두 가지 화살을 가지고있다. 페이지가로드되면 CSS를 사용하여 왼쪽 화살표를 숨기고 슬라이드 쇼가 끝나면 오른쪽 화살표를 숨기려고합니다. 나는 페이지에서 왼쪽 화살표를 제거하기 위해 부모 "margin-left : 0"을 탐지하는 것과 같은 트릭을 시도했지만 지금까지는 어떤 성공도하지 못했습니다. 나는 또한 오른쪽 화살표를 제거 할 수 없었습니다. 아래는 제 코드입니다. 이 작업을 수행하는 더 간단한 방법이 있다는 것을 알고 있지만 이런 종류의 문제로는 경험이 없습니다.

<div id="tips-navbar"> 
    <ul class="slides"> 
     <li id="the-best-mashed-potatoes" class="selected"> 
     <div class="st-label">The Best Mashed Potatoes</div> 
     <div class="underline"></div> 
     </li> 
     <li id="fully-loaded-mashed-potatoes"> 
     <div class="st-label">Fully Loaded Mashed Potatoes</div> 
     <div class="underline"></div> 
     </li> 
     <li id="perfect-mashed-sweet-potatoes"> 
     <div class="st-label">Perfect Mashed Sweet Potatoes</div> 
     <div class="underline"></div> 
     </li> 
     <li id="how-to-make-mash-tinis"> 
     <div class="st-label">How to Make Mash-tinis</div> 
     <div class="underline"></div> 
     </li> 
     <li id="simple-smashed-potatoes"> 
     <div class="st-label">Simple Smashed Potatoes</div> 
     <div class="underline"></div> 
     </li>    
    </ul> 
     <a class="st-brownBg st-left-m"> 
      <div class="st-arrowVideoBack"></div> 
     </a> 

     <a class="st-brownBg st-right-m"> 
      <div class="st-arrowVideoNext"></div> 
     </a> 
    </div> 

    $(function vNext(){ 
     $(".st-right-m").click(function() { 
      $("#tips-navbar ul").animate({ 
       marginLeft: "-=431" 
      }, 500); 
      $(".st-left-m").css('display','block'); 
      if($('.st-right-m'.click() >= 4)){ 
       $('.st-right-m').hide() 
      } 
     }); 
    }); 

    $(function vPrev(){ 
     $(".st-left-m").click(function() { 
      $("#tips-navbar ul").animate({ 
       marginLeft: "+=431" 
      }, 500); 
      if($($this).parents('.slides').css('marginLeft' === 0 + 'px')){ 
       $(this).hide(); 
      } 
     }); 

    }); 

샌드 박스 : 당신은 "마지막 아이", 귀하의 경우 지난 < 리>를 찾기 위해 jQuery를 사용할 수 http://jsfiddle.net/eapo/oq46u3wf/1/

Answer 1

:이 참조를 참조하십시오

$.current = 1; 

$.updateArrows = function() { 
    if ($.current <= 1) { 
     if ($(".st-left-m").is(':visible')) { 
      $(".st-left-m").hide(); 
     } 
    } else { 
     $(".st-left-m").show(); 
    } 
    if ($.current >= 5) { 
     if ($(".st-right-m").is(':visible')) { 
      $(".st-right-m").hide(); 
     } 
    } else { 
     $(".st-right-m").show(); 
    } 
}; 

$(function vNext(){ 
    $(".st-right-m").click(function() { 
     $("#tips-navbar ul").animate({ 
      marginLeft: "-=431" 
     }, 500); 
     $.current++; 
     $.updateArrows(); 
    }); 
}); 

$(function vPrev(){ 
    $(".st-left-m").click(function() { 
     $("#tips-navbar ul").animate({ 
      marginLeft: "+=431" 
     }, 500); 
     $.current--; 
     $.updateArrows(); 
    }); 
}); 

우리가 실제로 여기에서 무엇 것은 :

1. 클릭 할 때마다 업데이트되는 현재 슬라이드에서 var를 유지합니다.
2. 또한 클릭 할 때마다 현재 슬라이드를 확인하는 화살표 (추가 기능 포함)가 업데이트됩니다. 1이면 왼쪽 화살표가 숨겨지고, 5이면 오른쪽 화살표가 숨겨집니다.

Answer 2

, 그에 따라 행동. http://api.jquery.com/last-child-selector/

// 당신의 예를 들어 당신은 당신의 JS 코드를 사용하여 다음을 수행 할 수 있습니다

$(".slides li").is(':last-child')