jQueryの簡単なスライドショー。

jQueryに関するトピックを読んだ後、すぐに本を注文するために走りました。 私は認める、私は非常に興味を持って読んだ。 実際に、これがどんな獣なのか見たかった。 幸いなことに、viewsale.ruプロジェクトの改善点の1つが明らかになり、サイトで多くの作業が行われました。 結局、それは私には思える、それはかなりうまくいった。 簡単なスライドショーを作成する方法を共有したいと思います。



ハブを検索して、 解決策を見つけました。 それぞれに12枚の写真の3つのブロックのみを配置することが判明しました。 必要以上ではない ブラウザはそれに耐えませんでした。 彼はスローダウンして飛び出し始めました。



その結果、問題を解決することが急務でした。 Isisの 記事のおかげで、答えはかなり早く見つかりました。

どのように機能しますか？

1つのブロックのみの例が考慮されます。 jQueryライブラリーとjQuery Timersが必要になります。



画像を含む配列を作成します。

imgArray1 = new Array();

imgArray1[0]= '1.jpg' ;

...

imgArray1[n]= 'n.jpg' ;



次に、スライド変更プロセスを記述します。

jQuery( function (){

var countArray1 = imgArray1.length; //

var countArray1V = 0;

jQuery( "img#slideShow1" ).everyTime(3000, function (i) { // #slideShow1 3

countArray1V++;

if (countArray1V > (countArray1-1))countArray1V=0;

jQuery( "img#slideShow1" ).fadeIn(2000).attr( "src" ,imgArray1[countArray1V]); //

});

});



ビデオのブロックは1つの画像です。 そこにプリローダーをプリロードします。

< img src ='/img/35.gif' id ='slideShow1' alt ='' />

何が起こっているの？

タイマーが開始され、それに伴い変数countArray1Vが増加します。 さらに、countArray1Vの値が配列countArray1の長さに達した場合、countArray1Vを0に等しくします。次に、プロセスが繰り返されます。



すべてが非常にシンプルであることが判明しました。 例を見てみましょう 。 速度テストのために、これらのブロックを100ページ1ページに表示することにしました。 それは非常にうまく機能します。



ご清聴ありがとうございました。 この資料が役に立てば幸いです。