序一（08/07/06）

看到alibaba的一個圖片切換效果，感覺不錯，想拿來用用。但代碼一大堆的，看著昏，還是自己來吧。
由于有了做圖片滑動展示效果的經驗，做這個就容易得多了。

序二（09/03/19）

自寫了Tween緩動之后就很想重新寫過這個效果，近來有點時間，終于可以動手了。
除了改成Tween緩動，也改進了程序算法，不過原理還是一樣的。

效果預覽

仿淘寶/alibaba圖片切換：

默認緩動方式1方式2

?

程序說明

原理就是通過不斷設置滑動對象的left(水平切換)和top(垂直切換)來實現圖片切換的動態效果。

首先需要一個容器，程序會自動設置容器overflow為hidden，如果不是相對或絕對定位會同時設置position為relative，
滑動對象會設置為絕對定位：

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

如果沒有設置Change切換參數屬性，會自動根據滑動對象獲取：

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

執行Run方法就會開始進入切換，其中有一個可選參數用來重新設置要切換的圖片索引：

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

之后就到設置使用tween緩動時需要的參數了，
包括_target(目標值)、_t(時間)、_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(持續時間)是自定義屬性。

參數設置好后就執行Move程序開始移動了。
里面很簡單，首先判斷_c是否有值（等于0表示不需要移動）和_t是否到達Duration，
未滿足條件就繼續移動，否則直接移動到目標值并進行下一次切換：

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

?

使用說明

實例化需要3個參數，分別是容器對象，滑動對象和切換數量，之后可以直接執行Run方法運行：

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

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

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

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

?

程序代碼

Code
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???"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???this.options.Change?:
????????this._slider[bVertical???"offsetHeight"?:?"offsetWidth"]?/?this._count;
};
SlideTrans.prototype?=?{
??//設置默認屬性
??SetOptions:?function(options)?{
????this.options?=?{//默認值
????????Vertical:????true,//是否垂直方向（方向不能改）
????????Auto:????????true,//是否自動
????????Change:????????0,//改變量
????????Duration:????50,//滑動持續時間
????????Time:????????10,//滑動延時
????????Pause:????????2000,//停頓時間(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???"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);
??}
};

?

下載測試代碼

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

轉載于:https://www.cnblogs.com/cloudgamer/archive/2008/07/06/SlideTrans.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。