使用Jquery进行前后导航

我想要通过jQuery控制简单的前向/后向导航。目前我有以下代码：

$("#main-navigation a").bind("click",function(event){
    event.preventDefault();

    var target = $(this).attr("href");
    $("html, body").stop().animate({
        scrollLeft: $(target).offset().left,
        scrollRight: $(target).offset().right
    }, 1200,'easeInOutBack');
});

和HTML

<nav id="main-navigation">
    <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</nav>  

<div id="home" class="panel">
    <div class="wrapper">
        <img src="images/landing.png" width="1024" height="768" title="landing page" />

    </div>
</div>

<div id="explore" class="panel">
    <div class="wrapper">
        <img src="images/pageTwo.png" width="1024" height="768" title="page" />

    </div>
</div>

最终，DOM有很多div，所以我想要一个相对简单的方法，让jQuery在每个div之间移动（向前和向后），希望不用借助插件

我怎样才能做到这一点

---

提前谢谢

@Nikola谢谢你的提醒。。