JQuery 콘텐츠 슬라이더 - 모범 사례?

Question

기본적으로 거대한 콘텐츠 슬라이더 인 웹 사이트를 만들고 싶습니다. div 1 (본질적으로 전체 화면)을 볼 수 있고 페이지 2로 이동하기 위해 아래쪽 화살표를 클릭 할 수 있습니다. 2 나는 또한 왼쪽과 오른쪽 (페이지 2에만) 갈 수 있고, 이미지 슬라이더로 생각하지만 div와 함께하고 싶다.

나는 플러그인을 사용할 수 있다는 것을 알고 있지만 나는 그것을 스스로 쓰고있다. 일부는 (기본) JQuery가 작동하지만 너무 부풀어 오르는 것처럼 보였고, 나는 더 나은 /보다 효율적인 방법을 원했다. 내가 무엇을했는지는 이것에 접근하는 가장 좋은 방법이 무엇인지, 나는 찾고 있지 않다. 코드를 배우고 싶지만 나아지기는하지만이 문제를 해결할 수있는 최선의 방법을 생각할 수 없다면 switch 문을 사용할 수 있습니까? 그 일에 대해 어떻게 생각하세요?

또한 div 수만큼 스크롤 할 수 없도록해야합니다. 현재 if 문과 함께 var를 사용하고 있지만 간단한 함수로 모두를 결합하는 방법이 있어야한다고 생각하십니까?

JS 아래이며, 또한 JSFiddle

감사있다!

http://jsfiddle.net/W4SVz/

부인으로

$(function() { 
    var box = $('.box'); 
    TriggerClick = 0; 

    $("#down").click(function(){ 
    var height = $('.box').outerHeight(); 

    if(TriggerClick == 0){ 
     TriggerClick = 1; 
     $(box).stop().animate({top:'-='+height}, 500); 
    }else if(TriggerClick == 1){ 
     TriggerClick = 2; 
     $(box).stop().animate({top:'-='+height}, 500); 
    } 
    }); 

    $("#up").click(function(){ 
    var height = $('.box').outerHeight(); 

    if(TriggerClick == 2){ 
     TriggerClick = 1; 
     $(box).stop().animate({top:'+='+height}, 500); 
    }else if(TriggerClick == 1){ 
     TriggerClick = 0; 
     $(box).stop().animate({top:'+='+height}, 500); 
    } 
    }); 

    $("#left").click(function(){ 
    var height = $('.box').outerHeight(); 
    if(TriggerClick == 1){ 
     $(box).stop().animate({left:'-='+height}, 500); 
    } 
    }); 

    $("#right").click(function(){ 
    var height = $('.box').outerHeight(); 
    if(TriggerClick == 1){ 
     $(box).stop().animate({left:'+='+height}, 500); 
    } 
    }); 

}); 

Answer 1

, 좋은 아이디어는 실제 사용을 위해 자신을 하나 만들 수 없게됩니다. 다른 브라우저에서 많은 호환성 문제가 발생할 수 있습니다.

그러나 학습 목적으로, 나는 당신과 나의 작은 지식을 공유하게되어 기쁘다.

저는 자주 Kelvin Luck의 jquery plugin jscrollpane을 사용했습니다. 가볍고 구성 가능한 플러그인입니다. 내 의견으로는, 그것은 또한 당신이 공부할 흥미로운 부분 일 것입니다. 여기에서 코드를 찾을 수 있습니다 : http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.js

이 플러그인은 매우 간단하게 사용됩니다. 당신도보고 싶지 수도 있습니다. http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html

내가 아는 한, 그것은 jquery 이벤트 시스템의 강력한 사용합니다. 자유롭게 이해하면 어쩌면 개선 할 수 있습니다 ;-)

재미있게 보내십시오!

Answer 2

코드 측면에서 볼 때, 네 가지 경우 모두에 공통적 인 것이 무엇인지 알아 내려고합니다 (왼쪽 아래로). TriggerClick 변수가 매우 직관적이라고 생각하지 않습니다. 필요하지는 않습니다.

플러그인 패턴을 사용하여 함수를 jQuery에 추가 한 다음 (Brainfeeders 링크 참조) 페이지로드시 해당 함수를 사용하십시오.

아이디어를 가지고 놀았지만 내 코드를 올리지는 않을 것입니다.보고 싶다면 고함을 지르십시오.