网站建设大全,html5开发环境,郑州网站建设贝斯特,网站建设的难处在Google搜关键字“slider”或“swiper”能找到一大堆相关插件#xff0c;自己造轮子是为了能更好的理解其中的原理。 给这个插件取名为“veSlider”是指“very easy slider”非常简单的一个滑动插件。 这只是个半成品#xff0c;仅仅实现了手指滑动、自动轮播、跳转等基本功… 在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 二、结构 1CSS 只是做了简单通用设置可以自定义扩充。 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 } 2HTML 为了实现方便我直接将相关的ul与li标签写死在页面中。 高级点的话可以通过JS脚本动态输出并且在输出的时候可以做图片预加载等处理。 height写在了style中因为各种情况下的高度是不同的所以自定义设置 1 ul classveSlider styleheight:180px idveSlider
2 li
3 a hrefhttp://www.cnblogs.com/strick/
4 img srcimg/banner.jpg width100% /
5 /a
6 /li
7 /ul 3JavaScript 通过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. 下图第一次是慢速第二次是快速 4slideTo方法控制某个子集滑动到指定位置 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 自动移动的时候用.4this.caculate(index, time || .1);
}; 1. 传入当前的子集索引然后根据_setThreshold方法获取到正确的索引值 2. _setThreshold控制“0”的数设置为0“last”也就是最大索引值的数设置为last 3. 给other值赋值根据缓存的direction方向判断贴在一起的子集是上一个还是下一个同样也要做_setThreshold判断 4. 隐藏会移动的图片这个代码就是用来解决上面“实现原理与效果”中第6点提到的问题 5. 下图是演示如果不隐藏会出现的问题滑动的时候出现了最后那张图片 5. 最后做位移计算 5caculate方法计算偏移值 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如需转载请自行联系原作者
