JavaScript画像切り替え表示効果 alibaba拡張版_画像特殊効果 JavaScript画像切り替え表示効果-jsチュートリアル-php.cn

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

PHP中文网

リリース： 2016-05-16 19:01:11

オリジナル

843 人が閲覧しました

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

まずコンテナが必要です。そのオーバーフローを非表示に設定し、位置を相対に設定します。
コンテナ内にはスライドするオブジェクトもあります。その位置を絶対に設定します。
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="http://shundebk.cn/temp/1.jpg"/></li> 
<li><img src="http://shundebk.cn/temp/2.jpg"/></li> 
<li><img src="http://shundebk.cn/temp/3.gif"/></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(); 
} 
})

ログイン後にコピー

ソースコード: