水平滾動內容

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代碼做水平滾動：

$("#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"); 
} 

這裏是小提琴：http://jsfiddle.net/xtatanx/DY3k3/

非常感謝你給大家！

Answer 1

我認爲你的代碼很多！

給屬性與網頁的HTML標記，他被鏈接上：

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

然後加上所有.nav一個勁兒地功能，將進入所謂的attribut頁：

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

對於你的下一個/ prev鏈接，只需檢查你目前正在的頁面並添加/減法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/