網(wǎng)(LieHuo.Net)教程 看到alibaba的一個圖片切換效果，感覺不錯，想拿來用用。但代碼一大堆的，看著昏，還是自己來吧。 由于有了做圖片滑動展示效果的經(jīng)驗，做這個就容易得多了。 自寫了Tween緩動之后就很想重新寫過這個效果，近來有點時間，終于可以動手了。除了改成Tween緩動，也改進了程序算法，不過原理還是一樣的。
先來看一下演示：
 |
 |
 |
 |  |  |
程序說明
原理就是通過不斷設(shè)置滑動對象的left(水平切換)和top(垂直切換)來實現(xiàn)圖片切換的動態(tài)效果。
首先需要一個容器，程序會自動設(shè)置容器overflow為hidden，如果不是相對或絕對定位會同時設(shè)置position為relative，
滑動對象會設(shè)置為絕對定位：
| 以下為引用的內(nèi)容： 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ù)屬性，會自動根據(jù)滑動對象獲取：
| 以下為引用的內(nèi)容： this.Change = this.options.Change ? this.options.Change : this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count; |
執(zhí)行Run方法就會開始進入切換，其中有一個可選參數(shù)用來重新設(shè)置要切換的圖片索引：
| 以下為引用的內(nèi)容： 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緩動時需要的參數(shù)了，
包括_target(目標(biāo)值)、_t(時間)、_b(初始值)和_c(變化量)：
| 以下為引用的內(nèi)容： 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è)置好后就執(zhí)行Move程序開始移動了。里面很簡單，首先判斷_c是否有值（等于0表示不需要移動）和_t是否到達Duration，未滿足條件就繼續(xù)移動，否則直接移動到目標(biāo)值并進行下一次切換：
| 以下為引用的內(nèi)容： 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網(wǎng)，php教程，php學(xué)習(xí)，php手冊，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請聯(lián)系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權(quán)所有
