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>

效果图

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

jQuery手机触屏拖动滑块验证跳转插件
HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...
c语言触屏滑动图片,jQuery手机触屏滑动的响应式图片轮播效果
插件描述:jQuery响应式图片插件,多种图片滑动轮播切换,兼容手机端的触屏滑动图片切换代码. 响应式触摸滑块 Javascript/css3 滑块 HTML This is a title This ...
jquery手机触屏滑动拼音字母城市选择器代码
今天用到城市选择,直接用拼音滑动方式来选择,用的时候引入jquery(个别样式需要自己修改) <div class="yp_indz"><img src=&quo ...
手机触屏滑动图片切换插件swiper.js
今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览源码下载实现的代码. html代码: <div ...
自动轮播图html代码适应手机,JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)...
1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了, ...
# 转：手机触屏触摸特效javascript-TouchSwipe（依赖于jquery库）中文说明
转:手机触屏触摸特效javascript-TouchSwipe(依赖于jquery库)中文说明项目中遇到触摸滑动的问题,在网上查找后,找到一个解决办法,再次记录一下,希望对大家有所帮助,该插件min ...
手机触屏触摸特效javascript-TouchSwipe（依赖于jquery库）中文说明
手机触屏触摸特效javascript-TouchSwipe(依赖于jquery库)中文说明最近需要做一个手机小门户网站,因为目前主流的手机都是安卓和苹果的,他们的浏览器内核都是webkit,这就意味 ...
手机html图片自动滚动,html5手机触屏滑动图片下一张查看特效
特效描述:html5 手机触屏滑动图片下一张查看特效.html5图片下一张查看代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Hungry cat 6 Whatever Hung ...
手机触屏事件（jquery）
在移动端,点击事件和悬停事件都同统一为点击事件,所以对于手机或者带有触屏的电子设备来说,触屏事件不可忽视,当然,在不可触摸的屏幕上,这写事件就没有作用了. 触摸开始事件:touchstart 当手指放 ...

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

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

最新文章

热门文章