JavaScript画像スライド切り替え効果

序章 1 (08/07/06)

アリババの写真切り替えエフェクトを見て、良いなと思ったので使ってみたいと思いました。でも、コードが多くてめまいがするので、自分でやったほうがいいでしょう。
私は画像のスライド表示エフェクトを作成した経験があるので、これを行うのははるかに簡単です。

序文 2 (09/03/19)

トゥイーンイージングを書いて以来、このエフェクトを書き直したいと思っていましたが、最近少し時間ができて、ようやく書くことができました。
Tween イージングへの変更に加えて、プログラム アルゴリズムも改善されましたが、原理は依然として同じです。

効果のプレビュー

<script> new SlideTrans("idContainer", "idSlider", 3, { Vertical: false }).Run(); </script>
仿淘宝/alibaba图片切换：

• 
• 
• 
• 
• 

默认缓动 方式1 方式2

<script> var nums = [], timer, n = $$("idSlider2").getElementsByTagName("li").length, st = new SlideTrans("idContainer2", "idSlider2", n, { onStart: function(){//设置按钮样式 forEach(nums, function(o, i){ o.className = st.Index == i ? "on" : ""; }) } }); for(var i = 1; i <= n; AddNum(i++)){}; function AddNum(i){ var num = $$("idNum").appendChild(document.createElement("li")); num.innerHTML = i--; num.onmouseover = function(){ timer = setTimeout(function(){ num.className = "on"; st.Auto = false; st.Run(i); }, 200); } num.onmouseout = function(){ clearTimeout(timer); num.className = ""; st.Auto = true; st.Run(); } nums[i] = num; } st.Run(); $$("idAuto").onclick = function(){ if(st.Auto){ st.Auto = false; st.Stop(); this.value = "自动"; }else{ st.Auto = true; st.Run(); this.value = "停止"; } } $$("idNext").onclick = function(){ st.Next(); } $$("idPre").onclick = function(){ st.Previous(); } $$("idTween").onchange = function(){ switch (parseInt(this.value)){ case 2 : st.Tween = Tween.Bounce.easeOut; break; case 1 : st.Tween = Tween.Back.easeOut; break; default : st.Tween = Tween.Quart.easeOut; } } </script>

 

程序说明

原理就是通过不断设置滑动对象的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";

[切り替えパラメータの変更] 属性が設定されていない場合は、スライド オブジェクトに基づいて自動的に取得されます:

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

Run メソッドを実行すると切り替えが開始され、切り替えられる画像インデックスをリセットするために使用されるオプションのパラメーターがあります:

インデックス == 未定義 && (インデックス = this.Index);
インデックス 0 && (インデックス = this._count -) 1) ||インデックス >= this._count && (インデックス=0);

== 未定義 && (インデックス = this.Index);
インデックス 0 && (インデックス = this._count -) 1) ||インデックス >= this._count && (インデックス =0);

次に、トゥイーンイージングを使用するときに必要なパラメータを設定します
_target (目標値)、_t (時間)、_b (初期値)、_c (変更量) を含む:

コード
this._target = -Math.abs(this.Change) *(this.Index =インデックス);
これ._t = 0;
this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? " トップ" :「左」]);
this._c = this._target - this._b;

.

カスタム属性であるDuration（継続時間）もあります。

パラメータを設定したら、移動プログラムを実行して移動を開始します。
内部は非常に単純です。まず、_c に値があるかどうか (0 に等しい場合は移動が必要ないことを意味します)、_t が継続時間に達するかどうかを判断します。 条件が満たされない場合は移動を続けます。それ以外の場合は、目標値に直接移動して次の切り替えを行います:

コード

if (this._c && this._t this.Duration) {
this.MoveTo(Math.round(this.Tween(this._t++, this._b, this ._c、 this.期間)));
this._timer = setTimeout(Bind(this, this.Move), this.Time); }
他{
this.MoveTo(this._target); 自動
.次)、これ 一時停止));。 } 使用説明書 インスタンス化には、コンテナ オブジェクト、スライディング オブジェクト、スイッチング番号の 3 つのパラメータが必要です。その後、Run メソッドを直接実行できます。 new SlideTrans("idContainer",
"idSlider

"

, 3

)。 ;

次のオプションの属性もあります:
vertical: true,//垂直かどうか(方向は変更できません)
Auto: true,//自動かどうか
Change: 0,//変化量
持続時間: 50, //スライド持続時間
時間: 10,//スライディングディレイ
Pause: 2000, //一時停止時間 (Auto が true の場合に有効)
onStart: function(){},//変換開始時に実行
onFinish: function(){},//変換完了時に実行
トゥイーン: Tween.Quart.easeOut//トゥイーン演算子

初期化後に垂直方向を変更することはできません。トゥイーン オペレーターは、ここでイージング効果を参照して選択できます (例では 3 つが選択されています)。

次のメソッドも提供されています:
次へ: 次へ切り替えます
前へ: 前に切り替える
停止：自動切り替えを停止します
そして上記のラン

プログラムコード

コード
var SlideTrans = 関数(コンテナ、スライダー、カウント、オプション) {
これ._slider = $(slider);
this._container =$(container);//コンテナオブジェクト
this._timer = null;//Timer
this._count = Math.abs(count);//数量を切り替える
this._target = 0;//目標値
これ._t = これ._b = これ._c = 0;//トゥイーンパラメータ

this.インデックス= 0;//現在のインデックス

this.SetOptions(オプション);

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 ? "上" : "左 「;//方向」

    //样式设置
var p = CurrentStyle(this._container).position;
    p == "相対" || p == "絶対 「 || ( this._container.style.position = "相対");
    this._container.style.overflow = "非表示";
    this._slider.style.position = "絶対";
    
    this.Change = this.options.Change ? this.options.Change :
        this._slider[bVertical ? "offsetHeight" : "offsetWidth" ] / this._count ;
};
SlideTrans.プロトタイプ = {
//デフォルトの属性を設定します
SetOptions: 関数(オプション) {
this.options ={//デフォルト値
縦: tru​​e,//縦ですか(方向は変更できません)
tru​​e,//自動かどうか
期間: 50,//スライド期間
時間: 10,//スライド遅延
PAUSE: 002000, // 暇つぶし（オートが有効な場合。 onStart:
function(){},//変換開始時に実行 onFinish:
function(){},//変換完了時に実行 ’ s ’ s ’ s ’ と ’ s ’ tween tween tween
}; Extend(this.options, options || {}); }、
//切り替え開始
実行: function(index) {
//修正インデックス
索引 インデックス 0 && (インデックス = this
._count -) 1) ||インデックス >= this._count && (インデックス=0); //パラメータを設定する this._target =
-Math.abs(this.Change)
* (this .インデックス = インデックス); これ._t = 0; this._b =
parseInt(CurrentStyle(this._slider)[this.options.Vertical ?
" トップ" :「左」]); ; this.onStart(); this.Move(); }、
//モバイル
移動: function() {
clearTimeout(this._timer);
//ターゲットに到達していない場合は移動を続け、そうでない場合は次のスワイプに進みます
if (&& この._t )この .期間) { this
.MoveTo(Math.round(this.Tween(this._t++, this._b, this ._c、 this.期間)));                                                                                                                                  }他
{ thismoveto（this._target）; 自動 .次)、これ 一時停止));。 } }、 //
に移動 MoveTo: 関数
(i) { this._slider.style[this
._css] =私+ "px" ; }、 //次 次:

関数
() { this.Run(
++this.Index); }、
//前 前: 関数() { this.Run(--this.Index);
}、
//やめて
停止: 関数() {
clearTimeout(this._timer); this.MoveTo(this._target);
}
};

テストコードをダウンロードする

その他の画像表示効果:
JavaScriptの画像変換効果(ieのみ)
JavaScript画像スライド表示効果