JavaScript画像切り替え表示効果 alibaba拡張版_画像特殊効果 JavaScript画像切り替え表示効果

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

まずコンテナが必要です。そのオーバーフローを非表示に設定し、位置を相対に設定します。
コンテナ内にはスライドするオブジェクトもあります。その位置を絶対に設定します。
initialize() で初期化します。いくつかのプロパティを機能させます。

切り替える前に Start() 関数を実行し、関連する設定を行います。
主に Index 属性 (インデックス) と _target 属性 (ターゲット値) を設定します。

if(this.Index < 0){ 
this.Index = this._count - 1; 
} else if (this.Index >= this._count){ this.Index = 0; } 
this._target = -1 * this._parameter * this.Index;

後は実行するだけです。移動を開始するには、Move() 関数を使用します。原理は、スライド オブジェクトの上部 (または左側) を設定して移動エフェクトを作成することです。
減速エフェクトでは、ステップ サイズを取得するために GetStep() 関数を実行する必要があります。 🎜>

var iStep = (iTarget - iNow) / this.Step;用目标值减当前值再除以一个参数，得到步长，

この方法で得られたステップ サイズは、現在値が目標値に近づくにつれて徐々に小さくなり、減速効果も作成されます。

次に、このステップをトップの設定に追加します。 (またはそのまま) 長くし、ターゲット値に達するまで Move() を継続するようにタイマーを設定します。

this._slider.style[style] = (iNow + iStep) + "px"; 
this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);

次の例のコンテナ構造:

<p class="container" id="idTransformView"> 
<ul class="slider" id="idSlider"> 
<li><img  src="/static/imghwm/default1.png"  data-src="http://shundebk.cn/temp/1.jpg"  class="lazy"  / alt="JavaScript画像切り替え表示効果 alibaba拡張版_画像特殊効果 JavaScript画像切り替え表示効果" ></li> 
<li><img  src="/static/imghwm/default1.png"  data-src="http://shundebk.cn/temp/2.jpg"  class="lazy"  / alt="JavaScript画像切り替え表示効果 alibaba拡張版_画像特殊効果 JavaScript画像切り替え表示効果" ></li> 
<li><img  src="/static/imghwm/default1.png"  data-src="http://shundebk.cn/temp/3.gif"  class="lazy"  / alt="JavaScript画像切り替え表示効果 alibaba拡張版_画像特殊効果 JavaScript画像切り替え表示効果" ></li> 
</ul> 
<ul class="num" id="idNum"> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul> 
</p>

必要な場合美しくするには、CSS で設定する必要があります:

.container, .container *{margin:0; padding:0;} 
.container{width:408px; height:168px; overflow:hidden;} 
.slider{position:absolute;} 
.slider li{ list-style:none;display:inline;} 
.slider img{ width:408px; height:168px; display:block;} 
.slider2{width:2000px;} 
.slider2 li{float:left;} 
.num{ position:absolute; right:5px; bottom:5px;} 
.num li{ 
float: left; 
color: #FF7300; 
text-align: center; 
line-height: 16px; 
width: 16px; 
height: 16px; 
font-family: Arial; 
font-size: 12px; 
cursor: pointer; 
overflow: hidden; 
margin: 3px 1px; 
border: 1px solid #FF7300; 
background-color: #fff; 
} 
.num li.on{ 
color: #fff; 
line-height: 21px; 
width: 21px; 
height: 21px; 
font-size: 16px; 
margin: 0 1px; 
border: 0; 
background-color: #FF7300; 
font-weight: bold; 
}

スタイルの設定は、幅や高さなどのプログラムにも関連しますが、ここでは説明しません。

次に、インスタンスを作成できます:

var tv = new TransformView ("idTransformView", "idSlider", 168, 3, { 
onStart : function(){ Each(objs, function(o, i) { o.className = tv.Index == i ? "on" : ""; }) }//按钮样式 
});

ここには主に 4 つのパラメータがあります。つまり、コンテナ オブジェクト、スライディング オブジェクト、スイッチング パラメータ、およびスイッチング量です。

プログラムが上下に切り替わる場合は切り替えパラメータの高さ、左右に切り替わる場合は切り替えの幅になります。
切り替え数は、切り替えオブジェクトの数です。たとえば、上記の例では 3 です。
最後のパラメータはいくつかの設定です:
属性: デフォルト値//説明
上: true,//上に行くかどうか (それ以外の場合は左へ)
ステップ: 5,// スライディング変更rate
Time: 10,//スライディングディレイ
Auto: true,//自動変換するかどうか
Pause: 2000,//一時停止時間(Autoがtrueの場合に有効)
onStart: function( ){} ,//変換開始時に実行
onFinish: function(){}//変換完了時に実行
この例では、onStart 属性が設定されており、関数はスタイルを設定することになっていますスイッチ開始時のボタンの状態
例は完成しました テストコード:

function Each(list, fun){ 
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); } 
}; 
var objs = $("idNum").getElementsByTagName("li"); 
var tv = new TransformView("idTransformView", "idSlider", 168, 3, { 
onStart : function(){ Each(objs, function(o, i) { o.className = tv.Index == i ? "on" : ""; }) }//按钮样式 
}); 
tv.Start(); 
Each(objs, function (o, i){ 
o.onmouseover = function(){ 
o.className = "on"; 
tv.Auto = false; 
tv.Index = i; 
tv.Start(); 
} 
o.onmouseout = function(){ 
o.className = ""; 
tv.Auto = true; 
tv.Start(); 
} 
})

ソースコード: