JavaScript实现图片滑动切换的代码示例分享_javascript技巧
程序员文章站
2022-05-01 19:25:38
...
假设我们这里有1到5五张bmp图片,那么控制图片切换显示的核心代码可以为:
主要体现了一个图片的切换控制思路,可以用于各种场景,那么下面我们来看一个复杂一些的实现,能够控制滑动和停顿事件等具体的实现图片的滑动切换效果的例子:
var $$ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } var CurrentStyle = function(element){ return element.currentStyle || document.defaultView.getComputedStyle(element, null); } var Bind = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function() { return fun.apply(object, args.concat(Array.prototype.slice.call(arguments))); } } var forEach = function(array, callback, thisObject){ if(array.forEach){ array.forEach(callback, thisObject); }else{ for (var i = 0, len = array.length; i = this._count && (index = 0); //设置参数 this._target = -Math.abs(this.Change) * (this.Index = index); this._t = 0; this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]); this._c = this._target - this._b; this.onStart(); this.Move(); }, //移动 Move: function() { clearTimeout(this._timer); //未到达目标继续移动否则进行下一次滑动 if (this._c && this._t
推荐阅读
-
怎样实现H5+CSS3手指滑动切换图片的示例代码
-
HTML+CSS+JavaScript实现图片3D展览的示例代码
-
基于jquery的高性能td和input切换并可修改内容实现代码_javascript技巧
-
javascript实现圣旨卷轴展开效果的示例代码分享
-
Js实现双击鼠标自动滚动屏幕的示例代码_javascript技巧
-
JS 实现Table相同行的单元格自动合并示例代码_javascript技巧
-
JS 实现Table相同行的单元格自动合并示例代码_javascript技巧
-
基于JavaScript实现图片剪切效果的示例代码(图)
-
JavaScript实现获取远程的html到当前页面中的示例代码分享
-
纯js实现背景图片切换效果代码_javascript技巧