Question

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

我过去曾使用过滑块，但没有绑定到现有的导航栏。

有什么建议吗？

我的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

你的意思是“页面转换”？有很多不同的方法可以做到这一点，包括this previous SO post或this fading one。

Answer 2

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

工作示例： 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");});
});

带有现有导航的主要内容滑块建议

2 个答案: