jQuery手机触屏左右滑动切换栏目和焦点图

实现jQuery手机触屏左右滑动用到一个滑动插件TouchSlide，大家可以百度下。

首先来看看左右滑动切换焦点图：

JQuery代码

        $(function(){

            TouchSlide({
                slideCell:"#slideBox",
                titCell:".myhd ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
                mainCell:".bd ul",
                effect:"leftLoop",
                autoPage:true,//自动分页
                autoPlay:true //自动播放

            });
});

html代码

            <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>

css代码：

    <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){
//省略异步加载不同栏目文章代码
}

html代码

            <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" οnclick="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>

css代码：

    <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>

效果图