javascript
JavaScript 图片滑动切换效果
序一(08/07/06)
看到alibaba的一個圖片切換效果,感覺不錯,想拿來用用。但代碼一大堆的,看著昏,還是自己來吧。
由于有了做圖片滑動展示效果的經驗,做這個就容易得多了。
序二(09/03/19)
自寫了Tween緩動之后就很想重新寫過這個效果,近來有點時間,終于可以動手了。
除了改成Tween緩動,也改進了程序算法,不過原理還是一樣的。
效果預覽
仿淘寶/alibaba圖片切換:
默認緩動方式1方式2
?
程序說明
原理就是通過不斷設置滑動對象的left(水平切換)和top(垂直切換)來實現圖片切換的動態效果。
首先需要一個容器,程序會自動設置容器overflow為hidden,如果不是相對或絕對定位會同時設置position為relative,
滑動對象會設置為絕對定位:
p?==?"relative"?||?p?==?"absolute"?||?(this._container.style.position?=?"relative");
this._container.style.overflow?=?"hidden";
this._slider.style.position?=?"absolute";
如果沒有設置Change切換參數屬性,會自動根據滑動對象獲取:
????this._slider[bVertical???"offsetHeight"?:?"offsetWidth"]?/?this._count;
執行Run方法就會開始進入切換,其中有一個可選參數用來重新設置要切換的圖片索引:
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(變化量):
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,
未滿足條件就繼續移動,否則直接移動到目標值并進行下一次切換:
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
?
程序代碼
Codevar?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 图片滑动切换效果的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: flutter中的生命周期函数
- 下一篇: 学习小技巧---javascript中获