Jquery 水平滚动内容

我正在尝试做一个网站，其中有一个部分，当你点击菜单按钮时，内容必须水平滚动，它也有方向导航，我想我是通过方向导航得到的，但我不知道如何跟踪我的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>

这是小提琴：

---

非常感谢大家

我认为您编写的代码太多了

为HTML标记及其链接页面赋予属性：

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

对于下一个/上一个链接，只需检查当前所在的页面并添加/删除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')
    }
}

功能doNavig（方向）{
var newPage=parseInt（$（'.activestate'）.attr（'frame'））+方向；
如果（新页<$（'.nav'）。长度和新页>=0）{
$（'#wrapper'）.animate（{left:newPage*-600}）；
$（'.active state'）.removeClass（'active-state'））
$（'.nav:n个子（'+String（newPage+1）+'））.addClass（'active-state'））
}
}

代码可以更优化，但我希望您做一些工作：）

---

以下是完整的代码：

我认为已经有很多插件可用于此目的。试试看，我只是在学习javascript和jquery，这就是我为什么要编写这么多代码的原因：p但我感谢你的帮助我会学习代码，以便理解你所做的一切！非常感谢你！真有用！这是我的荣幸。如果你需要帮助来理解我做了什么（函数或其他什么），请随意提问。我实际上有一个问题，我仍然不明白它如何在一个方向上设置-600的动画，但是当它到达它的位置时，它应该设置+600而不是-600的动画，对吗？你是如何做到这一点的？只有不到几行-600（这是单元格宽度的负值）*attr“frame”包含一个数字（检查html节点）。因为我设置了左侧位置的动画，所以它必须是负数，否则它会转到另一侧。是的，我理解，但当你按下按钮5时，它会到达该位置，当你再次按下1时，它应该转到+600而不是-600？：/啊哈

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

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')
    }
}