Yourself_jqueryによるスライディングピクチャテストをjQueryで実装した例-jsチュートリアル-php.cn

Yourself_jqueryによるスライディングピクチャテストをjQueryで実装した例

WBOY

リリース： 2016-05-16 17:17:29

オリジナル

1280 人が閲覧しました

最近、過去の基礎知識を復習して、jquery を使用して画像スライドプラグインを作成しました。まだいくつか問題がありますが、使い方は非常に簡単です。この関数は、slideW() 関数をターゲット要素にバインドするだけです。 2 つの入力に、それぞれ画像変更後の幅とアニメーションの速度を入力します。入力しない場合は、デフォルトの幅とデフォルトの速度が使用されます。

以下は私自身のテストの例です:

コードをコピーしますコードは次のとおりです:

//html コード 


 ;gt;
 ;


 ">

 
css code



コードをコピー コードは次のとおりです: 
//css code* {margin:0px;padding:0px; list-style-type:none;} 
body{text-align:center;} 
.content{width:590px;margin:0 auto;text-align:left ;} 
.list{幅:565px;マージン:0px 9px;border:1px ソリッド #eee;padding:5px;display:inline-block;overflow:hidden;} 
.liimg{padding:4px;border :1px ソリッド #aaa;border-radius :2px;display:inline-block;*display:inline;*margin:0px 3px;background:#FFF;width:auto;} 
.imgli{margin:2px 0px; width:125px;height:300px;display:inline-block;} 
.img1{background:url(images/img1.jpg) 繰り返しなし 50% 50%;} 
.img2{background:url(画像/img2.jpg) 繰り返しなし 50% 50%;} 
.img3{background:url(images/img3.jpg) 繰り返しなし 50% 50%;} 
.img4{background:url( image/img4.jpg) no-repeat 50% 50%;} 

 
js コード



コードをコピー コードは次のとおりです。  
//js コード//画像スライド効果を実現するための jquery
var zyljq = $.noConflict(); .extend({ 
slideW:function(wid,speed){ 
//widで設定する幅は最小幅または最大幅に設定可能 
//設定しない場合はデフォルト設定はバインドされた要素の幅に基づいて計算されます。 
//speed設定するアニメーションの実行速度は、標準、低速、高速、ミリ秒のいずれかです。 
//設定されていない場合、デフォルトの速度は通常です 
that = this //イベントのすべての要素をバインドします 
var eleNum = zyljq(this).size(); //画像を取得します
var curwidth = zyljq(this).width();//画像の元の幅を取得します
if(!wid){ 
wid = Math.round(curwidth*4/5); 🎜 >//アニメーションの終了条件が設定されていない場合は、デフォルトの状況が計算されます 
} 
if(zyljq.trim(speed) == ""){ 
//速度が設定されていない場合は、デフォルトの速度 
speed = "normal" 
} 
if(!isNaN(speed)){ 
// 負の値が設定されている場合は、
speed = を変更します。 Speed < 0? -speed:speed; 
} 
//写真の最大幅と最小幅を計算します
if(wid > curwidth){ 
widMin = Math.floor((eleNum) *curwidth - wid)/(eleNum-1)) "px"; 
widMax = ((curwidth*eleNum) - widMin*(eleNum-1)) "px"; = Math.floor((eleNum *curwidth - wid*(eleNum-1))) "px"; 
widMin = wid "px" 
} 
//console.log("widMax"; widMax ";widMin=" widMin ); 
//バインドホバーイベント 
zyljq(this).hover(function(){ 
zyljq(that).stop(); 
zyljq(this) .animate({width: widMax},speed); 
zyljq(that).not(this).animate({width:widMin},speed); 
},function(){ 
zyljq( that).stop() ; 
zyljq(that).animate({width:curwidth},speed) 
} 
}); >ビューは次のとおりです: 
元の効果: 

 
2 番目の要素の上にマウスを置いた後の効果: 

 
このプロセス中に、いくつかの一般的な問題も発生しました。 IE の以前のバージョンでは、margin: 0 auto; が中央に配置されず、display: inline-block がサポートされていません。気づいていない問題も多々あるかと思いますが、もし問題があればご指導いただければ幸いです。私たちは皆、一緒に進歩することができます。