jquery 横向滑动，下一步上一步。

#wizard
{
border: 5px solid #789;
font-size: 12px;
height: 530px;
margin: 20px auto;
overflow: hidden;
position: relative;
}
#wizard .items
{
width: 20000px;
clear: both;
position: absolute;
}
#wizard .right
{
float: right;
}
#wizard #status
{
height: 35px;
background: #79B8E9;
padding-left: 25px !important;
}
#status li
{
float: left;
color: #fff;
padding: 10px 30px;
}
#status li.active
{
background-color: #369;
font-weight: normal;
}
.input
{
width: 240px;
height: 18px;
margin: 10px auto;
line-height: 20px;
border: 1px solid #d3d3d3;
padding: 2px;
}
.page
{
padding: 20px 30px;
width: 650px;
float: left;
}
.page h3
{
height: 42px;
font-size: 16px;
border-bottom: 1px dotted #ccc;
margin-bottom: 20px;
padding-bottom: 5px;
}
.page h3 em
{
font-size: 12px;
font-weight: 500;
font-style: normal;
}
.page p
{
line-height: 24px;
}
.page p label
{
font-size: 14px;
display: block;
}
.btn_nav
{
height: 36px;
line-height: 36px;
margin: 20px auto;
}
.prev, .next
{
width: 100px;
height: 32px;
line-height: 32px;
background: url(btn_bg.gif) repeat-x bottom;
border: 1px solid #d3d3d3;
cursor: pointer;
}

<script type="text/javascript">
    $(function () {
        $("#wizard").scrollable({
            onSeek: function (event, i) { //切换tab样式 
                $("#status li").removeClass("active").eq(i).addClass("active");
            },
            onBeforeSeek: function (event, i) { //验证表单 
                if (i == 1) {
                    var user = $("#user").val();
                    if (user == "") {
                        alert("请输入用户名！");
                        return false;
                    }
                    var pass = $("#pass").val();
                    var pass1 = $("#pass1").val();
                    if (pass == "") {
                        alert("请输入密码！");
                        return false;
                    }
                    if (pass1 != pass) {
                        alert("两次密码不一致！");
                        return false;
                    }
                }
            }
        });
    }); 
</script>

<div id="wizard">
        <ul id="status">
            <li class="active"><strong>1.</strong>创建账户</li>
            <li><strong>2.</strong>填写联系信息</li>
            <li><strong>3.</strong>填写联系信息1111</li>
            <li><strong>4.</strong>完成</li>
        </ul>
        <div class="items">
            <div class="page">
                -----任意html内容-----
                <div class="btn_nav">
                    <input type="button" class="next right" value="下一步»" />
                </div>
            </div>
            <div class="page">
                -----任意html内容-----
                <div class="btn_nav">
                    <input type="button" class="prev" style="float: left" value="«上一步" />
                    <input type="button" class="next right" value="下一步»" />
                </div>
            </div>
            <div class="page">
                -----任意htmlsasdasd内容-----
                <div class="btn_nav">
                    <input type="button" class="prev" style="float: left" value="«上一步" />
                    <input type="button" class="next right" value="下一步»" />
                </div>
            </div>
            <div class="page">
                -----任意html内容-----
                <div class="btn_nav">
                    <input type="button" class="prev" style="float: left" value="«上一步" />
                    <input type="button" class="next right" id="sub" value="确定" />
                </div>
            </div>
        </div>
    </div>

来源：http://www.helloweba.com/view-blog-134.html

上面代码只能限定，下一步个数，只能横向导航4个内容， 如果需要添加横向菜单内容(会出现css乱，页面会显示2个上一步或者下一步)，可以才CSS里查询 page  修改宽度，
赋值  <div>

<script type="text/javascript" src="scrollable.js"></script>