zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    前端面试题(08)
    虚拟的DOM与DOM diff
    前端面试题(07)
    前端面试题(06)
    前端面试题(05)
    前端面试题(04)
    canvas(02绘制图形)
    前端面试题03
    HTB-靶机-Irked
    HTB-靶机-RedCross
  • 原文地址:https://www.cnblogs.com/cyweb/p/4120836.html
Copyright © 2011-2022 走看看