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

  • 相关阅读:
    257. Binary Tree Paths
    324. Wiggle Sort II
    315. Count of Smaller Numbers After Self
    350. Intersection of Two Arrays II
    295. Find Median from Data Stream
    289. Game of Life
    287. Find the Duplicate Number
    279. Perfect Squares
    384. Shuffle an Array
    E
  • 原文地址:https://www.cnblogs.com/cyweb/p/4120836.html
Copyright © 2011-2022 走看看