水平滚动内容

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/