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

序章 1 (08/07/06)

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

序文 2 (09/03/19)

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

効果のプレビュー

<script> new SlideTrans("idContainer", "idSlider", 3, { Vertical: false }).Run(); </script>
仿淘宝/alibaba图片切换：
<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，
滑动对象会设置为绝对定位：

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

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

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

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

.

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

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

"

, 3

)。 ;