Swipe.js支持网页点击和数字导航

Swipe.js是一个移动端的滑动插件,使用手指触摸滑动,并且支持左右导航,详情请访问之前的一篇文章介绍:Swipe.js

但却不支持网页版的点击跳转和数字导航,这些需要你自己添加的,之前本来是想使用这个在前端开发中的,最后发现没有这个功能,最近我又开始折腾了一下,发现原来也可以用在桌面版中,只不过需要自己额外添加一些代码。并且支持IE6.支持自适应设计,不需要jquery,一下子感觉好赞。

首先添加插件的路径,然后添加以下js代码:

var mySwipe = Swipe(document.getElementById('mySwipe'), {
// startSlide: 4,
auto: 3000,
// continuous: true,
// disableScroll: true,
// stopPropagation: true,
callback: function(index, element) {
slideTab(index);
}
// transitionEnd: function(index, element) {}
});
//点击数字跳转到响应的面板
var bullets = document.getElementById('pager').getElementsByTagName('em');
for (var i=0; i < bullets.length; i++) {
var elem = bullets[i];
elem.setAttribute('data-tab', i);
elem.onclick = function(){
mySwipe.slide(parseInt(this.getAttribute('data-tab'), 10), 500);
}
}
//高亮点击的数字导航
function slideTab(index){
var i = bullets.length;
while (i--) {
bullets[i].className = bullets[i].className.replace('on',' ');
}
bullets[index].className = 'on';
};

演示和下载

我已将项目fork并添加了上面的代码到演示文档里面了,你可以复制或者下载。

下载地址   演示地址 ,演示地址二(手机扫描下面二维码)

swipe


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流