jquery - 水平方向の Web 表示に最適な方法は?

Question

目の前に新しいプロジェクトがあり、7 ページの水平表示を作成する必要があります。中央のページがメイン ページで、左右に 3 つのページがあります。横長ディスプレイは初めてです。

どの方法が最善かつ最も直接的な方法でしょうか?! 人々はこれについてアイデアを持っていますか?!

助けてくれてありがとう

Answer 1

多分これはあなたを始めるでしょう：

CSS

html,
body
{
    height:100%;
}
body
{
    margin:0;
    padding:0;
    overflow:auto;
}
ul
{
    margin:0;
    padding:0;
}
ul li
{
    margin:0;
    padding:0;
    list-style-type:none;
    float:left;
}
ul li.page-1,
ul li.page-3,
ul li.page-5,
ul li.page-7
{
    background-color:#655;
}
ul li.page-2,
ul li.page-4,
ul li.page-6
{
    background-color:#855;
}
.clearfix:after
{
    clear:both;
    content:'.';
    display:block;
    font-size:0;
    height:0;
    line-height:0;
    visibility:hidden
}
.clearfix
{
    display:block;
    zoom:1
}​

jQuery

var width=$(window).width();

$('body').css('width',(width*7)+'px').scrollLeft((width*3));

$('ul li').css({'width':width+'px','height':$(document).height()+'px'});

HTML

<ul class="clearfix">
    <li class="page-1">
        page 1
    </li><li class="page-2">
        page 2
    </li><li class="page-3">
        page 3
    </li><li class="page-4">
        page 4 (current)
    </li><li class="page-5">
        page 5
    </li><li class="page-6">
        page 6
    </li><li class="page-7">
        page 7
    </li>
</ul>​

デモ

編集：

前/次のページに移動するには、次を追加します。

jQuery

$('.prev').click(function()
{
    i=$(this).parent('li').index()-1;

    $('body').animate({scrollLeft:(width * i)});

    return false;
});

$('.next').click(function()
{
    i=$(this).parent('li').index()+1;

    $('body').animate({scrollLeft:(width * i)});

    return false;
});

HTML

<ul class="clearfix">
    <li class="page-1">
        page 1
        <a href="#" class="next">Next</a>
    </li><li class="page-2">
        page 2
        <a href="#" class="prev">Prev</a> &middot; <a href="#" class="next">Next</a>    
    </li>
    ....
    <li class="page-7">
        page 7
        <a href="#" class="prev">Prev</a>
    </li>
</ul>​

デモ 2