實現jQuery手機觸屏左右滑動用到一個滑動外掛TouchSlide，大家可以百度下。

首先來看看左右滑動切換焦點圖：

JQuery程式碼

        $(function(){

            TouchSlide({
                slideCell:"#slideBox",
                titCell:".myhd ul", //開啟自動分頁 autoPage:true ，此時設定 titCell 為導航元素包裹層
                mainCell:".bd ul",
                effect:"leftLoop",
                autoPage:true,//自動分頁
                autoPlay:true //自動播放

            });
});
 

            <div id="slideBox" class="slideBox">
                <div class="bd">
                    <ul>
                        <li>
                            <a class="pic" href="#"><img src="${ctxStatic}/img/mobile/news1.png" /></a>
                            <a class="tit" href="#">墨西哥教師罷工 與警察激烈衝突</a>
                        </li>
                        <li>
                            <a class="pic" href="#"><img src="${ctxStatic}/img/mobile/news2.jpg"/></a>
                            <a class="tit" href="#">日右翼遊行紀念釣島"國有化"週年</a>
                        </li>
                        <li>
                            <a class="pic" href="#"><img src="${ctxStatic}/img/mobile/news3.jpg"/></a>
                            <a class="tit" href="#">女兵競選美國小姐鼓勵女性自強</a>
                        </li>
                        <li>
                            <a class="pic" href="#"><img src="${ctxStatic}/img/mobile/news4.jpg"/></a>
                            <a class="tit" href="#">濟南現“最窄人行道” 僅0.2米寬</a>
                        </li>
                    </ul>
                </div>

                <div class="myhd">
                    <ul style="height: 28px;"></ul>
                </div>
            </div>
 

    <style type="text/css">
        /* 焦點圖 */
        .slideBox{ position:relative; overflow:hidden; margin:0 auto;  max-width:560px;/* 設定焦點圖最大寬度 */margin-top: 45px;}
        .slideBox .myhd{ position:absolute; height:28px; line-height:28px; bottom:0; right:0; z-index:1;}
        .slideBox .myhd li{ display:inline-block; width:5px; height:5px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#B4B4B4; text-indent:-9999px; overflow:hidden; margin:11px 6px 12px;}
        .slideBox .myhd li.on{ background:#595959;  }
        .slideBox .bd{ position:relative; z-index:0; }
        .slideBox .bd li{ position:relative; text-align:center;  }
        .slideBox .bd li img{ vertical-align:top; width:100%;height:200px;/* 圖片寬度100%，達到自適應效果 */}
        .slideBox .bd li a{ -webkit-tap-highlight-color:rgba(0,0,0,0); text-decoration: none; }  /* 去掉連結觸控高亮 */
        .slideBox .bd li .tit{ display:block; width:100%;  position:absolute; bottom:0; text-indent:10px; height:28px; line-height:28px;color:#fff;  text-align:left;}
    </style>
 

jquery程式碼

$(function(){
                TouchSlide({ slideCell:"#touchSlide",mainCell:'.mybd',effect:"left",startFun:function(i,c){
                console.log(i,c);  	    
                if(i==0){
                    $(".mybd").animate({
                        marginTop: "0px"
                    }, 1);
                    $("#slideBox").show();
                }else{
                    $(".mybd").animate({
                        marginTop: "45px"
                    }, 1);
                    $("#slideBox").hide();
                    swithPage(i);//切換欄目載入資料
                }
                for(var t=0;t<=i;t++){
                    $(".hd").scrollLeft(t*60);
                }                  
            }});
});
        function swithPage(index){
//省略非同步載入不同欄目文章程式碼
}

            <div id="touchSlide" class="tabBox">
            <div class="hd">
                <ul>
                    <c:forEach items="${categoryList}" var="category">
                        <li><a>${category.name}</a></li>
                    </c:forEach>
                </ul>
            </div>
                <div class="mybd">
                    <ul class="flag" id="category_0">
                        <c:forEach items="${newsPages.list}"  var="article">
                            <li>
                                <a href="#" data-ignore="true">
                                <span>${article.title}<br/></span><em class='hasimgem'><fmt:formatDate value="${article.updateDate }" pattern="MM-dd HH:mm"/></em>
                                </a>
                            </li>
                        </c:forEach>
                            <li>             
                            <a type="button" id="getMore_0" onclick="getMore()"><img src="${ctxStatic}/img/mobile/load.gif" />
                            <c:if test="${newsPages.totalPages>1}"><span>點選載入更多</span></c:if>
                            <c:if test="${newsPages.totalPages==1}"><span>已顯示全部內容</span></c:if>
                            </a>   
                            </li>                          
                    </ul>
                    <c:forEach items="${categoryList}" var="category" begin="1" varStatus="i">
                        <ul class="flag" id="category_${i.index}"></ul>
                    </c:forEach>
                </div>

                <div id="goTotop"><img src="${ctxStatic}/img/mobile/gototop.png"/></div>
            </div>

    <style type="text/css">
        .tabBox .hd{ height:45px; line-height:30px;font-size:medium; background:#f4f4f4; border-bottom:1px solid #E4E4E4;overflow-x: auto;width: 170%;position: fixed;top:0;z-index: 555;}
        .tabBox .hd ul{height:40px;overflow-x: auto;width: 170%;}
        .tabBox .hd ul li{ float:left; margin:7px 5px; color:#464646;padding:0 5px;}
        .tabBox .hd ul li.on{color:#3235CF;background: #DEDEDE;border-radius: 7px;}
        .tabBox .hd ul .on a{ display:block; /* 修復Android 4.0.x 預設瀏覽器當前樣色無效果bug */  }
        .flag li{
            border-bottom: 1px solid #E4E4E4;
            padding:8px 0;
            margin: 0 8px;
            position: relative;
            list-style: none;
        }
        .flag li a{
            display: block;
            position: relative;
            text-decoration: none;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #000000;
            font-size:medium;
        }
        .flag li span{
            position: absolute;
            top: 0;
            left:110px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .flag li em{
            font-style: normal;
            font-size: smaller;
            color: #B9B9B9;
        }
        .hasimgem{
            position: absolute;
            bottom: 0;
            left: 110px;
        }
        .flag li:last-child{
            border-bottom: none;
        }
    </style>