欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JavaScript实现图片滑动切换的代码示例分享_javascript技巧

程序员文章站 2022-05-01 19:25:38
...
假设我们这里有1到5五张bmp图片,那么控制图片切换显示的核心代码可以为:
JavaScript实现图片滑动切换的代码示例分享_javascript技巧


主要体现了一个图片的切换控制思路,可以用于各种场景,那么下面我们来看一个复杂一些的实现,能够控制滑动和停顿事件等具体的实现图片的滑动切换效果的例子:

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