自制 移动端 纯原生 Slider滑动插件-阿里云开发者社区

开发者社区> 技术小胖子> 正文

自制 移动端 纯原生 Slider滑动插件

简介:
+关注继续查看

在Google搜关键字“slider”或“swiper”能找到一大堆相关插件,自己造轮子是为了能更好的理解其中的原理。

给这个插件取名为“veSlider”是指“very easy slider”非常简单的一个滑动插件。

这只是个半成品,仅仅实现了手指滑动、自动轮播、跳转等基本功能。代码撑死了200行不到,用的原理也比较简单粗暴。

点击跳转到Github上代码地址。扫描下面的二维码可以查看在线demo:

 

一、实现原理与效果

1)在下图中,将“ul”容器设置为相对定位,子标签“li”设置为绝对定位

2)移动的效果,其实就是动态修改translateX的值

3)相邻的两张图片能够贴在一起,就是translateX起的作用

4)动态给“li”添加或移除过渡效果,可以实现缓动

5)当你向左滑动最后一张图片,跟着出来的是第一张;或者当你向右滑动第一张图片,跟着出来的是最后一张图片

6)在第5点中,要实现这种效果需要做些控制,注意“li”标签最后会被设置为visibility,就是在做相关的控制,后面会讲到

7)根据下图可以看到,当前的“li”的translateX值肯定是0,然后上一张为-320px,下一张320px

 

二、结构

1)CSS

只是做了简单通用设置,可以自定义扩充。

 1 .veSlider {
 2   position: relative;
 3   list-style: none;
 4   margin: 0;
 5   padding: 0;
 6   width: 100%;
 7   overflow: hidden;
 8 }
 9 .veSlider > li {
10   position: absolute;
11   top: 0;
12   left: 0;
13   list-style: none;
14   overflow: hidden;
15   height: inherit;
16 }

 

2)HTML

为了实现方便,我直接将相关的ul与li标签写死在页面中。

高级点的话,可以通过JS脚本动态输出,并且在输出的时候可以做图片预加载等处理。

height写在了style中,因为各种情况下的高度是不同的,所以自定义设置

1 <ul class="veSlider" style="height:180px" id="veSlider">
2   <li>
3     <a href="http://www.cnblogs.com/strick/">
4       <img src="img/banner.jpg" width="100%" />
5     </a>
6   </li>
7 </ul>

 

3)JavaScript

通过new一个veSlider对象做初始化。

var slider = new veSlider({
  container: document.getElementById('veSlider')
});

目前可以传入的参数只有4个。容器container目前只支持单个的,例如上面的“getElementById”;不支持列表初始化,例如“getElementsByTagName”等

var defaults = {
  container: '', //容器对象
  auto: false, //自动轮播
  easing: 'ease-in', //缓动类型
  duration: 3000 //自动轮播间隔时间
};

 

三、实现代码

1)插件封装

现在有比较时髦的AMD、UMD模块规范,为了让插件支持这些规范,需要做一些声明。

为了防止在引入其他JS脚本的时候,将window或undefined重写掉,会传入原生的window与undefined。

;(function(factory) {
  /* CommonJS module. */
  if (typeof module === "object" && typeof module.exports === "object") {
    module.exports = factory(window);
    /* AMD module. */
  } else if (typeof define === "function" && define.amd) {
    define(factory(window));
    /* Browser globals. */
  } else {
    factory(window);
  }
}(function(global, undefined) {
  "use strict";
  
}));

 

2)构造函数

1. 默认参数与传入的参数做合并

2. 一些值的初始化,例如容器container、偏移对象offset

3. 容器尺寸的获取,通过方法“getBoundingClientRect”获得。关于尺寸获取可以参考《JavaScript中尺寸、坐标

4. 给容器绑定事件,“touchstart”、“touchmove”等。事件绑定用到了“handleEvent”方式绑定。事件方面的资料可以参考《JavaScript中事件处理

5. 获取容器中的子集,并将这些子集的translateX值初始化

6. 初始化自动轮播。下面是部分代码:

function veSlider(opts) {
  this.opts = extend(opts, defaults);//默认参数与传入参数合并
  this.size = this.container.getBoundingClientRect(); //容器尺寸
  this.children = slice.call(this.container.children); //容器的子集
  this.currentIndex = 0; //当前索引
  this._bind(); //绑定动画事件

  this.caculate(this.currentIndex); //初始化子集的偏移量
  this.opts.auto && this.play(); //初始化自动轮播
};

 

3)切换子集的判断

在“touchend”事件中,做了简单的判断。

1. 对于慢速滑动,如果滑动的距离超过了当前容器的一半,那就做切换操作

2. 间隔时间在 300ms 内就算快速滑动,滑动距离只要超过 14,就做切换操作

3. 下图第一次是慢速,第二次是快速

 

4)slideTo方法控制某个子集滑动到指定位置

veSliderProtytype.slideTo = function(index, time) {
  this.currentIndex = index = this._setThreshold(index);
  var other = this.direction == CONST.LEFT ? (index - 1) : (index + 1);
  other = this._setThreshold(other);

  //隐藏需要移动的子集
  this.children.forEach(function(dom, i) {
    if (i == index || i == other) {
      return;
    }
    dom.style.visibility = 'hidden';
  });
  //手指移动的时候用.1 自动移动的时候用.4
  this.caculate(index, time || '.1');
};

1. 传入当前的子集索引,然后根据_setThreshold方法获取到正确的索引值

2. _setThreshold控制“<0”的数设置为0,“>last”也就是最大索引值的数,设置为last

3. 给other值赋值,根据缓存的direction方向,判断贴在一起的子集是上一个还是下一个,同样也要做_setThreshold判断

4. 隐藏会移动的图片,这个代码就是用来解决上面“实现原理与效果”中第6点提到的问题

5. 下图是演示如果不隐藏会出现的问题,滑动的时候出现了最后那张图片

5. 最后做位移计算

 

 

5)caculate方法计算偏移值

veSliderProtytype.caculate = function(index, time, offsetX) {
  var _this = this, last = this.last;
  this.children.forEach(function(dom, i) {
    var x = i - index;
    if (index == 0 && i == last) {
      x = -1;
    } else if (index == last && i == 0) {
      x = 1;
    }
    setTransition(dom, _this.opts.easing, time);
    setTranslateX(dom, x, _this.size, offsetX || 0);
  });
};

1. 计算相对当前子集的尺寸偏移倍数,通过“i - index”取得值

2. 再判断当前子集是第一个或最后一个,这两个位置比较特殊

3. 设置过渡与translateX的相关值

4. 偏移值是通过计算的“offsetX + size.width * i”,容器宽度的倍数加上当前移动的距离

5. 以容器宽度为320px为例,通过上面的计算,可以让当前子集translateX为0,前一张为-320px,后一张为320px,再后一张就是两倍640px

 

四、可以改进的部分

1、CSS可以有更多的效果,也可以嵌入到JavaScript中

2、li标签可以用JS脚本输出,而不用写死在页面中

3、支持数组初始化,例如container设置为通过“getElementsByTagName”获取到的数组

4、支持更多的自定义参数设置,目前只有4个

5、浏览器兼容性,目前只支持webkit内核相关的

6、在各个事件里,可以有自己定义的事件

7、目前只支持左右滑动,上下滑动的话要做些更灵活的修改

还有很多方面可以改进,这里就不列举了。

 





    本文转自 咖啡机(K.F.J)   博客园博客,原文链接:http://www.cnblogs.com/strick/p/5297491.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Firefox 火狐下自动刷新的插件 ReloadEvery
插件安装的方式:1、首先安装Firefox 火狐浏览器2、打开火狐浏览器,在火狐的工具菜单--附加组件中搜索名为 ReloadEvery 的插件或者直接访问 https://addons.mozilla.org/zh-CN/firefox/addon/115 点击“安装到Firefox”,即可安装完成。
1592 0
自己动手实现一个Android Studio插件
在使用Android Studio开发的时候,大部分人都会使用一些插件来提高开发效率,例如我们所熟知的butternife,selector,,GsonFormat等,这些分别从不同的原理来帮助我们提高开发效率,也美化了我们的代码结构。 既然插件有这么多好处,我们就来自己实现一个简单的吧,这里为了方便讲解我们,我们就以Android tintBar作为例子来讲解。Android Studio是
1621 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
6394 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7618 0
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片。相信大家都知道jQuery是最优秀的Javascript框架之一。以其语法简单灵活而大受Web designer欢迎。
655 0
13262
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载