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

来源：互联网发布：oracle云计算平台实战编辑：程序博客网时间：2024/06/05 10:01

实现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" 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>

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>

效果图

1 0