0

既存の 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>

なにか提案を？

4

2 に答える 2

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");});
});
于 2012-11-20T18:28:13.403 に答える
2

「ページ遷移」のことですか？これを行うには、以前の SO の投稿やこの衰退した投稿など、さまざまな方法があります。

于 2012-11-20T18:02:33.780 に答える