가로 스크롤 내용

Question

나는 방향 버튼을 클릭하면 콘텐츠가 가로로 스크롤해야하는 섹션이 있고, 방향 탐색을 할 수있는 웹 사이트를 만들려고 노력 중입니다. 방향 탐색과 같지만 나는 그들을 클릭 할 때마다 그들을 이동하기 위해 내 div의 위치를 ​​추적하는 방법에 대해 알아낼 수 없습니다. offset();를 사용하려고합니다. jquery와 함께하지만 일을 할 수는 없습니다. 나는 누군가가 나를 달성 할 수 있도록 도와 줄 수 있다면 감사 할 것이다. 아픈 사람들에게 내가 지금까지 가지고있는 것을 볼 수 있도록 몇 가지 코드와 js 바이올린을 남겨주세요.

html 코드 :

<nav> 
    <ul> 
     <li id="1" class="active-state">1</li> 
     <li id="2">2</li> 
     <li id="3">3</li> 
     <li id="4">4</li> 
     <li id="5">5</li> 
    </ul> 
</nav> 

<section id="content"> 
    <div id="wrapper"> 
     <div class="content" id="yellow"></div> 
     <div class="content" id="blue"></div> 
     <div class="content" id="red"></div> 
     <div class="content" id="purple"></div> 
     <div class="content" id="green"></div> 
    </div> 
</section> 
<ul id="directionNav"> 
    <li id="left">left</li> 
    <li id="right">right</li> 
</ul> 

jQuery 코드는 수평 스크롤을 할 : http://jsfiddle.net/xtatanx/DY3k3/

모두에게 대단히 감사합니다 :

여기

$("#3").on("click", horizontalScroll); 
$("#4").on("click", horizontalScroll2); 

function horizontalScroll() { 
console.log($("#3").offset().left); 
$("#wrapper").animate({ 
    right: ($("#4").offset().left -1200) 
}); 
console.log("clicked"); 
} 

function horizontalScroll2() { 
console.log($("#4").offset().left); 
$("#wrapper").animate({ 
    right: ($("#4").offset().left -1200) 
}); 
console.log("clicked"); 
} 

는 바이올린입니다!

Answer 1

많은 코딩을하고 있다고 생각합니다!

function changeFrame(){ 
    $('#wrapper').animate({left : $(this).attr('frame')*-600}); 
    $('.active-state').removeClass('active-state') 
    $(this).addClass('active-state') 
} 

: 그런 다음 attribut에서 호출 된 페이지로 이동하는 모든 .nav에 signle 기능을 추가

<li frame='1' class='nav'>page 1</li> 

: 페이지와 HTML 태그에

가지 적어 속성은 그는에 연결되어

다음/이전 링크는 현재 페이지를 확인하고 1을 더하거나 빼십시오. 나는 더 깨끗한 코드를 위해 2 가지 기능을했습니다.

function navigFrame(){ 
    switch(this.id){ 
     case 'left' : doNavig(-1); break; 
     case 'right' : doNavig(1); break; 
    } 
} 

을 그리고 여기 onNavig의 코드는 다음과 같습니다 :

클릭에에는 느릅 나무 확인을 클릭

function doNavig(direction){ 
    var newPage = parseInt($('.active-state').attr('frame'))+direction; 
    if(newPage < $('.nav').length && newPage >= 0){ 
     $('#wrapper').animate({left : newPage*-600}); 
     $('.active-state').removeClass('active-state') 
     $('.nav:nth-child('+String(newPage + 1)+')').addClass('active-state') 
    } 
} 

코드를 더 최적화 할 수 있습니다,하지만 난 당신이 어떤 일을 할 :) 내가 있다고 생각 http://jsfiddle.net/DY3k3/2/