UI 수정 : 슬라이드 쇼가 양쪽 끝에 도달했을 때 아무것도 나는 다음을 페이드 이전이 scrollTo 기능에 대한 제어하는 ​​함수를 만들려고하고

Question

http://cambridgeuplighting.com/portfolio

스크롤 남아 있지 페이드 이전은/다음 컨트롤 . 나는 좋은 출발을 가지고 있지만 그것이 내가 원하는 방식으로 작동하지 않습니다. 컨트롤이 끝나기 전에 클릭을 페이드 아웃해야합니다. 지금은 끝까지 도달 한 다음 다음 클릭 (마지막에 스크롤하기 때문에 스크롤하지 않습니다)은 컨트롤을 희미하게 만듭니다.

다음은 내 코드입니다. 미리 감사드립니다.

jQuery를이

jQuery(function($){ 
    var itemSize = $('div.portfolioPost').size(); 
    var containerWidth = itemSize*240; 
    //set the width of the container depending on how many post items are there 
    $('#postContainer').css({'width': containerWidth }) 
    //find the relative position of the end point by getting the negative value of the container width minus 961 (extra pixel is to account for IE difference) 
    var endPoint = 0-containerWidth+961; 
    $('.olderEvents').click(function() { 
     $('.newerEvents').fadeTo(350, 1.0) 
     var slidePos = $('#postContainer').position(); 
     if (slidePos.left<=endPoint) { 
      $('.olderEvents').fadeTo(350, 0.1) 
     } else { 
      $('#slideScreen').scrollTo('+=960', 700); 
     } 
    }); 

    $('.newerEvents').click(function() { 
     $('.olderEvents').fadeTo(350, 1.0) 
     var slidePos = $('#postContainer').position(); 
      //relative position of 0 means the slideshow is at the other end 
     if (slidePos.left==0) { 
      $('.newerEvents').fadeTo(350, 0.1) 
     } else { 
      $('#slideScreen').scrollTo('-=960', 700); 
     } 
    }); 
}); 

Answer 1

: 나는 컨트롤을 사용하지 않도록 설정의 효과에 대한 귀하의 의견에 동의합니다. 목록의 끝에 도달하면 첫 번째 요소로 스크롤되는 코드가 있습니다. 예보기 @http://cambridgeuplighting.com/portfolio

jQuery(function($){ 
     var itemSize = $('div.portfolioPost').size(); 
    var containerWidth = itemSize*240; 
    $('#postContainer').css({'width': containerWidth }) 
    var endPoint = 0-containerWidth+961; 
    $('.olderEvents').click(function() { 
     var slidePos = $('#postContainer').position(); 
     if (slidePos.left<=endPoint) { 
      $('#slideScreen').scrollTo('-='+containerWidth, 1000); 
     } else { 
      $('#slideScreen').scrollTo('+=480', 500); 
     } 
    }); 

    $('.newerEvents').click(function() { 
     var slidePos = $('#postContainer').position(); 
     if (slidePos.left==0) { 
      $('#slideScreen').scrollTo('+='+containerWidth, 1000); 
     } else { 
      $('#slideScreen').scrollTo('-=480', 500); 
     } 
    }); 
}); 

Answer 2

내가 원하는 기능은 사용자에게 직관적이라고 주장 할 것이다 (HTML과 CSS에 대한 사이트에 위의 링크를 참조하십시오). 사용자가 이미 사용하고있는 컨트롤을 비활성화하는 대신; 사용자가 다른 컨트롤을 인식하고 초기화하도록 강요하므로이 컨트롤을 사용자에게 직관적 인 함수로 다시 매핑하는 것이 더 유용 할 수 있습니다.

이 경우 사용자가이 컨트롤을 사용하여 역순으로 목록을 탐색 할 수 있습니다. 사용자에게 콘텐츠를 탐색하는 데 가장 유용한 도구를 제공하려고 시도하는 것으로 접근하십시오.

이런 식으로 생각해보십시오. 도서 스택을 사용 /보기/정렬하는 더 좋은 방법은 무엇입니까? 행을 나열하고 줄을 앞뒤로 움직이게하거나 게으른 수잔에 책을 놓고 사용자가 그것을 돌릴 수 있도록 사용자에게 요청하십시오.

은유는 사용자가 끝이있는 문자열이 아닌 끊어지지 않은 체인으로 콘텐츠를보고 더 쉽게 원 또는 행을 시각적으로 표현할 수있게하는 방법에 대해 자세히 설명합니다.

이 방법의 적절한 예는 여기에 표시됩니다 : 그렉-J @ http://www.ndoherty.biz/demos/coda-slider/2.0/