以下做一個(gè)參考，將導(dǎo)航包裹一層div，設(shè)置其寬度100%，超出x軸滾動(dòng)，超出y軸隱藏，然后通過點(diǎn)擊導(dǎo)航讓其移動(dòng)

/*樣式*/

.scroll-nav{overflow-x:auto; overflow-y:hidden; white-space:nowrap;}

/*頁(yè)面*/

<div class="scroll-nav">

    <ul>

        <li class="active">壹號(hào)土豬</li>

        <li>金利白豬</li>

        <li>五谷草豬</li>

        <li>壹號(hào)土豬</li>

        <li>壹號(hào)土豬</li>

    </ul>

</div>

/*js*/

初始時(shí)計(jì)算導(dǎo)航li的寬度，給ul賦值

$(function(){

    var liLen = $(".scroll_nav li").outerWidth();

    var liCount = $(".scroll_nav ul").children().length;

    $(".scroll_nav ul").css("width",(liLen*liCount)+'px');

    // 點(diǎn)擊導(dǎo)航

    $(".scroll_nav li").click(function(){

        //移動(dòng)導(dǎo)航

        $(this).addClass("active").siblings().removeClass("active");

        var index = $(this).index();

        var liW = $(this).width();

        $('.scroll_nav').stop().animate({scrollLeft:index*liW},300);

    });

})