Partage d'exemples de code pour JavaScript afin d'implémenter la commutation coulissante des compétences images_javascript

Supposons que nous ayons cinq images bmp de 1 à 5, alors le code principal qui contrôle l'affichage de commutation des images peut être :

<script>
 var i=1;
 var img = new Array();
 img[0] = "1.bmp";
 img[1] = "2.bmp";
 img[2] = "3.bmp";
 img[3] = "4.bmp";
 img[4] = "5.bmp";
 function playImg(){
 i=i+1;
 var imgs = document.getElementById("img");
 imgs.src =img[i];
 if(i>=4){
 i=1;
 }
 }
 window.onload = function(){
 document.getElementById("img").src="1.bmp";
 }
</script>
<img id="img" src="" width="500" hieght="500" onclick="playImg()" style="cursor:pointer;">

Il incarne principalement une idée de contrôle de commutation d'image et peut être utilisé dans divers scénarios. Examinons donc une implémentation plus complexe qui peut contrôler les événements de glissement et de pause et d'autres exemples spécifiques de réalisation de l'effet de commutation glissante d'images :

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 < len; i++) { callback.call(thisObject, array[i], i, array); }
}
}
var Tween = {
Quart: {
 easeOut: function(t,b,c,d){
 return -c * ((t=t/d-1)*t*t*t - 1) + b;
 }
},
Back: {
 easeOut: function(t,b,c,d,s){
 if (s == undefined) s = 1.70158;
 return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
 }
},
Bounce: {
 easeOut: function(t,b,c,d){
 if ((t/=d) < (1/2.75)) {
 return c*(7.5625*t*t) + b;
 } else if (t < (2/2.75)) {
 return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
 } else if (t < (2.5/2.75)) {
 return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
 } else {
 return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
 }
 }
}
}

//容器对象,滑动对象,切换数量
var SlideTrans = function(container, slider, count, options) {
this._slider =
(slider);this.container=
(container);//容器对象
this._timer = null;//定时器
this._count = Math.abs(count);//切换数量
this._target = 0;//目标值
this._t = this._b = this._c = 0;//tween参数

this.Index = 0;//当前索引

this.SetOptions(options);

this.Auto = !!this.options.Auto;
this.Duration = Math.abs(this.options.Duration);
this.Time = Math.abs(this.options.Time);
this.Pause = Math.abs(this.options.Pause);
this.Tween = this.options.Tween;
this.onStart = this.options.onStart;
this.onFinish = this.options.onFinish;

var bVertical = !!this.options.Vertical;
this._css = bVertical &#63; "top" : "left";//方向

//样式设置
var p = CurrentStyle(this._container).position;
p == "relative" || p == "absolute" || (this._container.style.position = "relative");
this._container.style.overflow = "hidden";
this._slider.style.position = "absolute";

this.Change = this.options.Change &#63; this.options.Change :
 this._slider[bVertical &#63; "offsetHeight" : "offsetWidth"] / this._count;
};
SlideTrans.prototype = {
 //设置默认属性
 SetOptions: function(options) {
this.options = {//默认值
 Vertical: true,//是否垂直方向（方向不能改）
 Auto: true,//是否自动
 Change: 0,//改变量
 Duration: 30,//滑动持续时间
 Time: 10,//滑动延时
 Pause: 3000,//停顿时间(Auto为true时有效)
 onStart: function(){},//开始转换时执行
 onFinish: function(){},//完成转换时执行
 Tween: Tween.Quart.easeOut//tween算子
};
Extend(this.options, options || {});
 },
 //开始切换
 Run: function(index) {
//修正index
index == undefined && (index = this.Index);
index < 0 && (index = this._count - 1) || index >= 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 &#63; "top" : "left"]);
this._c = this._target - this._b;

this.onStart();
this.Move();
 },
 //移动
 Move: function() {
clearTimeout(this._timer);
//未到达目标继续移动否则进行下一次滑动
if (this._c && this._t < this.Duration) {
 this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration)));
 this._timer = setTimeout(Bind(this, this.Move), this.Time);
}else{
 this.MoveTo(this._target);
 this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause));
}
 },
 //移动到
 MoveTo: function(i) {
this._slider.style[this._css] = i + "px";
 },
 //下一个
 Next: function() {
this.Run(++this.Index);
 },
 //上一个
 Previous: function() {
this.Run(--this.Index);
 },
 //停止
 Stop: function() {
clearTimeout(this._timer); this.MoveTo(this._target);
 }
};