網(LieHuo.Net)教程 看到alibaba的一個圖片切換效果，感覺不錯，想拿來用用。但代碼一大堆的，看著昏，還是自己來吧。 由于有了做圖片滑動展示效果的經驗，做這個就容易得多了。 自寫了Tween緩動之后就很想重新寫過這個效果，近來有點時間，終于可以動手了。除了改成Tween緩動，也改進了程序算法，不過原理還是一樣的。
先來看一下演示：
 |
 |
 |
 |  |  |
程序說明
原理就是通過不斷設置滑動對象的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(變化量)：
| 以下為引用的內容： 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)); } |
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
