因项目需求自己整理了一套仿网易新闻的闻横滑翻页,联动导航,用到了swiper.js zepto.js scroll.js效果非常不错。
以下是代码:
/* * 作者 hyl * email:hylxinlang@sina.cn * 该列子仅供参考 */ var mySwiper1; var mySwiper; function goLocation(i){ mySwiper.swipeTo(i, 300, function(){}); setClass(i); } $(document).ready(function(){ mySwiper = new Swiper('.swiper-container', { pagination : '.pagination', paginationClickable : true , }); mySwiper1 = new Swiper('.swiper-container1', { pagination : '.pagination', paginationClickable : true, slidesPerView : 5 }); mySwiper.params.onSlideNext = function() { var index = mySwiper.activeIndex; mySwiper1.swipeTo(index, 300, function() { }); var slidleft = $("#slide" + index).offset().left; $(".bar").offset({ left : slidleft }); setClass(index); // alert(slidleft); } mySwiper.params.onSlidePrev = function() { var index = mySwiper.activeIndex; mySwiper1.swipeTo(index, 300, function() { }); var slidleft = $("#slide" + index).offset().left; $(".bar").offset({ left : slidleft }); setClass(index); } $("div[name='title']").each(function(index, el) { $(el).click(function(){ goLocation(index); var slidleft = $("#slide" + index).offset().left; $(".bar").offset({ left : slidleft }); }); }); }); /*--------------------socroll---------------------------------------------------*/ var myScroll0; var myScroll1; var myScroll2; var myScroll3; var myScroll4; var myScroll5; var myScroll6; var myScroll7; var myScroll8; var myScroll9; function loaded() { myScroll0 = new iScroll('wapper0'); myScroll1 = new iScroll('wapper1'); myScroll2 = new iScroll('wapper2'); myScroll3 = new iScroll('wapper3'); myScroll4 = new iScroll('wapper4'); myScroll5 = new iScroll('wapper5'); myScroll6 = new iScroll('wapper6'); myScroll7 = new iScroll('wapper7'); myScroll8 = new iScroll('wapper8'); myScroll9 = new iScroll('wapper9'); } document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false); document.addEventListener('DOMContentLoaded', loaded, false); /*--------------------socroll-----------------------------------------------------*/ function goto(url) { window.location.href = url; } function setClass(i) { $("div[name='title']").each(function(index, el) { if (index != i) { if ($(el).hasClass("cuurent")) { $(el).removeClass("cuurent"); } } else { $(el).addClass("cuurent"); } }); }
效果图
下载地址http://download.csdn.net/detail/hylqqcsd/6840301
欢迎访问参赛作品mopaas:http://my.oschina.net/u/659530/blog/192259
相关推荐
因项目需求自己整理了一套仿网易新闻的闻横滑翻页,联动导航,用到了swiper.js zepto.js scroll.js效果非常不错。效果图请看
Swiper_触屏滑动全屏3D翻页
swiper各种滑动demo,还有左右滑动中间嵌入上下滑动,代码简介,案例多,种类全,之后在我的博客里,也会有些swiper滑动使用得介绍(加入动画,左右滑动嵌入上下滑动)
swiper横向循环焦点图片类似 https://www.swiper.com.cn/demo/web/index.html这个页面的例子
Swiper 轻量的移动端 H5 翻页库,提供了必要的配置选项和 API
前端vue-awesome-swiper实现上下两级相互联动,绝对优秀!!!
swiper手机移动端触屏滑动选项卡 Swiper Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile ...
很多滑动好用的demo例子,很好用哦。
swiper横向循环焦点图片类似 swiper官网https://www.swiper.com.cn/demo/web/index.html这个页面的例子
上一个因为比较匆忙,有一个地方写错了,请下载这个,,,正好自己有这方面需求,网上又找不到就急匆匆写了一个,基于swiper 写的横向滚动日历,大家有更好的可以分享
这个是基于Swiper库做的 内容我给了一个高度,方便查看效果, 应用到实际项目中不用设置高度 内容自动撑开 // 进去页面就判断第一个页面内容的高度 添加给swiper-container var divHgight=$(".divHgight").eq(0)....
基于swiper 8.4.5的实现的例子
基于swiper.js手机触屏滑动全屏幻灯片左右切换代码,带缩略图和左右控制箭头的手机移动端图片轮播插件。
说到h5的翻页,很定第一时间想到的是swiper。但是我当时想到的却是,vue里边怎么用swiper。这篇文章主要介绍了vue-awesome-swiper - 基于vue实现h5滑动翻页效果 ,需要的朋友可以参考下
typescript vue开发的日历组件,使用swiper库来支持日历滑动功能,简单易用
jQuery swiper水平左右滑动时间轴特效,非常的漂亮美观,鼠标拖动或箭头按钮控制时间轴滑动展示。
基于Swiper插件的触屏滑动jQuery相册代码 基于Swiper插件的触屏滑动jQuery相册代码 基于Swiper插件的触屏滑动jQuery相册代码 基于Swiper插件的触屏滑动jQuery相册代码
html中通过swiper实现的图片预览功能,主要功能是点击图片,图片放大查看,支持左右滑动。
双重横向菜单 多个swiper
html5手机滑动js插件,项目中用的这个,挺好用的