javascript - 现有导航的主要内容 slider 建议

Question

我正在尝试在现有的 html 页面上制作内容 slider 。基本上，当用户单击导航链接时，内容将“滑出”当前页面并“滑入”相应页面。

我过去使用过 slider ，但没有绑定(bind)到现有的导航栏。

有什么建议吗？

我的html结构是这样的:

<div id="wrapper">
  <ul class="nav">
    <li class="navlink">item</li>
    <li class="navlink">item</li>
    <li class="navlink">item</li>
    <li class="navlink">item</li>
  </ul>
  <div class="content">
     content
  </div>
</div>

有什么建议吗？

Answer 1

你可以看看这个，做了一个非常简单的脚本。

工作示例: http://jsfiddle.net/9rde7/6/

HTML:

<div id="wrapper">
  <ul class="nav">
    <li class="navlink" page="page1">item</li>
    <li class="navlink" page="page2">item</li>
    <li class="navlink" page="page3">item</li>
  </ul>
  <div class="content">
     <div class="content-page active" id="page1">Content 1</div>
     <div class="content-page" id="page2" style="background:#666">Content 2</div>
     <div class="content-page" id="page3">Content 3</div>
  </div>
</div>​​​​​​

CSS:

.content{
    background:#efefef;
    position:relative;
    width:99%;
    height:500px;
    margin:0 auto;
    overflow:hidden;
}

.content-page{
    background:#dddddd;
    position:absolute;
    width:100%;
    height:100%;
    left:100%;
}

.content-page.active{
    left:0;
}

Javascript:

$('.nav li').bind('click', function(){
    $page = $('#'+$(this).attr("page"));
    if($page.hasClass("active")) return;

    $('.content-page.active').animate({left:"100%"},200);
    $('.content-page').removeClass("active");
    $page.animate({left:"0"},200, function(){$page.addClass("active");});
});