序一（08/07/06）

看到alibaba的一個(gè)圖片切換效果，感覺不錯(cuò)，想拿來用用。但代碼一大堆的，看著昏，還是自己來吧。
由于有了做圖片滑動(dòng)展示效果的經(jīng)驗(yàn)，做這個(gè)就容易得多了。

序二（09/03/19）

自寫了Tween緩動(dòng)之后就很想重新寫過這個(gè)效果，近來有點(diǎn)時(shí)間，終于可以動(dòng)手了。
除了改成Tween緩動(dòng)，也改進(jìn)了程序算法，不過原理還是一樣的。

效果預(yù)覽

仿淘寶/alibaba圖片切換：

默認(rèn)緩動(dòng)方式1方式2

?

程序說明

原理就是通過不斷設(shè)置滑動(dòng)對(duì)象的left(水平切換)和top(垂直切換)來實(shí)現(xiàn)圖片切換的動(dòng)態(tài)效果。

首先需要一個(gè)容器，程序會(huì)自動(dòng)設(shè)置容器overflow為hidden，如果不是相對(duì)或絕對(duì)定位會(huì)同時(shí)設(shè)置position為relative，
滑動(dòng)對(duì)象會(huì)設(shè)置為絕對(duì)定位：

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";

如果沒有設(shè)置Change切換參數(shù)屬性，會(huì)自動(dòng)根據(jù)滑動(dòng)對(duì)象獲取：

this.Change?=?this.options.Change???this.options.Change?:
????this._slider[bVertical???"offsetHeight"?:?"offsetWidth"]?/?this._count;

執(zhí)行Run方法就會(huì)開始進(jìn)入切換，其中有一個(gè)可選參數(shù)用來重新設(shè)置要切換的圖片索引：

index?==?undefined?&&?(index?=?this.Index);
index?<?0?&&?(index?=?this._count?-?1)?||?index?>=?this._count?&&?(index?=?0);

==?undefined?&&?(index?=?this.Index);
index?<?0?&&?(index?=?this._count?-?1)?||?index?>=?this._count?&&?(index?=?0);

之后就到設(shè)置使用tween緩動(dòng)時(shí)需要的參數(shù)了，
包括_target(目標(biāo)值)、_t(時(shí)間)、_b(初始值)和_c(變化量)：

Code
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;

還有Duration(持續(xù)時(shí)間)是自定義屬性。

參數(shù)設(shè)置好后就執(zhí)行Move程序開始移動(dòng)了。
里面很簡單，首先判斷_c是否有值（等于0表示不需要移動(dòng)）和_t是否到達(dá)Duration，
未滿足條件就繼續(xù)移動(dòng)，否則直接移動(dòng)到目標(biāo)值并進(jìn)行下一次切換：

Code
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));
}

?

使用說明

實(shí)例化需要3個(gè)參數(shù)，分別是容器對(duì)象，滑動(dòng)對(duì)象和切換數(shù)量，之后可以直接執(zhí)行Run方法運(yùn)行：

new?SlideTrans("idContainer",?"idSlider",?3).Run();

還有以下可選屬性：
Vertical:?true,//是否垂直方向（方向不能改）
Auto:??true,//是否自動(dòng)
Change:??0,//改變量
Duration:?50,//滑動(dòng)持續(xù)時(shí)間
Time:??10,//滑動(dòng)延時(shí)
Pause:??2000,//停頓時(shí)間(Auto為true時(shí)有效)
onStart:?function(){},//開始轉(zhuǎn)換時(shí)執(zhí)行
onFinish:?function(){},//完成轉(zhuǎn)換時(shí)執(zhí)行
Tween:??Tween.Quart.easeOut//tween算子

其中Vertical初始化后就不能修改，Tween算子可參照這里的緩動(dòng)效果選擇（實(shí)例中選了其中3個(gè)）。

還有提供了以下方法：
Next: 切換下一個(gè)
Previous: 切換上一個(gè)
Stop: 停止自動(dòng)切換
還有上面說到的Run

?

程序代碼

Code
var?SlideTrans?=?function(container,?slider,?count,?options)?{
????this._slider?=?$(slider);
????this._container?=?$(container);//容器對(duì)象
????this._timer?=?null;//定時(shí)器
????this._count?=?Math.abs(count);//切換數(shù)量
????this._target?=?0;//目標(biāo)值
????this._t?=?this._b?=?this._c?=?0;//tween參數(shù)
????
????this.Index?=?0;//當(dāng)前索引
????
????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???"top"?:?"left";//方向
????
????//樣式設(shè)置
????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???this.options.Change?:
????????this._slider[bVertical???"offsetHeight"?:?"offsetWidth"]?/?this._count;
};
SlideTrans.prototype?=?{
??//設(shè)置默認(rèn)屬性
??SetOptions:?function(options)?{
????this.options?=?{//默認(rèn)值
????????Vertical:????true,//是否垂直方向（方向不能改）
????????Auto:????????true,//是否自動(dòng)
????????Change:????????0,//改變量
????????Duration:????50,//滑動(dòng)持續(xù)時(shí)間
????????Time:????????10,//滑動(dòng)延時(shí)
????????Pause:????????2000,//停頓時(shí)間(Auto為true時(shí)有效)
????????onStart:????function(){},//開始轉(zhuǎn)換時(shí)執(zhí)行
????????onFinish:????function(){},//完成轉(zhuǎn)換時(shí)執(zhí)行
????????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);
????//設(shè)置參數(shù)
????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();
??},
??//移動(dòng)
??Move:?function()?{
????clearTimeout(this._timer);
????//未到達(dá)目標(biāo)繼續(xù)移動(dòng)否則進(jìn)行下一次滑動(dòng)
????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));
????}
??},
??//移動(dòng)到
??MoveTo:?function(i)?{
????this._slider.style[this._css]?=?i?+?"px";
??},
??//下一個(gè)
??Next:?function()?{
????this.Run(++this.Index);
??},
??//上一個(gè)
??Previous:?function()?{
????this.Run(--this.Index);
??},
??//停止
??Stop:?function()?{
????clearTimeout(this._timer);?this.MoveTo(this._target);
??}
};

?

下載測試代碼

其他圖片展示效果：
JavaScript 圖片變換效果(ie only)
JavaScript 圖片滑動(dòng)展示效果

轉(zhuǎn)載于:https://www.cnblogs.com/cloudgamer/archive/2008/07/06/SlideTrans.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript 图片滑动切换效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。