广

JavaScript

  • IOS开发
  • android开发
  • PHP编程
  • JavaScript
  • ASP.NET
  • ASP编程
  • JSP编程
  • Java编程
  • 易语言
  • Ruby编程
  • Perl编程
  • AJAX
  • 正则表达式
  • C语言
  • 编程开发

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

    2018-04-16 10:56:40 次阅读 稿源:互联网
    广告

    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并添加了上面的代码到演示文档里面了,你可以复制或者下载。

    下载地址

    一起学吧部分文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与一起学吧进行文章共享合作。

    广告
    广告
    广告