スポンサーリンク
jQueryをフェードとギャラリー
によって書かれた記事ルカルッジェーロ
ページ1の2
ページ1の2
jQueryのおかげでそれは非常に魅力の非常にシンプルな画像ギャラリーを実現することができる、この簡単なチュートリアルでは、単純なフェードのギャラリーや画像が順番に表示されるギャラリーを作成する方法を参照してください（隣同士）ではなく、 フェード効果を使用される楽しい。
私達のギャラリーを達成するためにすべてのプラグインを使用しませんが、我々は、jQueryを提供するツールの賢明な利用に自分自身を制限されます。
我々は我々が意図している内容のプレビューを参照してください。
我々は、HTMLコードを分析する。
<HTML>
<HEAD>
jQueryを使ってスライドの<title>ギャラリー</タイトル>
<link rel="stylesheet" type="text/css" href="style.css">
全トラックsrc="jquery.js"> </ SCRIPT>
全トラックsrc="fadegallery.js"> </ SCRIPT>
</ヘッド>
<BODY>
<div id="fadegallery"> </ DIV>
</ BODY>
</ HTML>
我々は、DIVのIDのfadegalleryを割り当てるには、ページの本文に、我々は、ヘッダと外部スタイルシート、jQueryライブラリとコードを、次のうち、ファイルfadegallery.jsを呼び出します。
関数show（X）{$（"＃IMG"+ x）のfadeIn（"遅い"）;}
$（ドキュメント）。レディ
（
機能（）
{
$（"＃Fadegallery"）。後、（"
"）;
VAR IMG =新しいアレイ（）;
/ / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **
IMG [0] ="pippo.jpg";
IMG [1] ="pluto.jpg";
IMG [2] ="paperino.jpg";
/ / ***** ***** ***** ***** ***** ***** ***** ***** ***** *** **
します。var i = 0;
（ⅰ= 0;私<img.lengthは、i + +）
{
$（"＃Fadegallery"）。追加（"+ iは+ <div id='img" "'class='boxfoto'> <img src='" + + img[i] "'> </ DIV>"） ;
window.setTimeoutは（"ショー（"+ iは+"）"、（（I + 1）* 1000））;
}
}
）;
その操作は簡単です：最初に我々がいる、順番に、配列内のすべての項目を抽出サイクルで動的に構築するさまざまなDIVの（フェージングによる）鑑賞するためにjQueryのfadeInの関数を呼び出すパラメータ化された関数を作成するHTMLで画像やページのレイアウトが含まれています。
ループの内部で、また効果のシーケンスを作成するには、正確に、第二から実行しているタイマーと順番に各ステップでの秒のさらなる増加に伴って機能が表示されます（）を呼び出す。
文に注意してください。
$（"＃Fadegallery"）。後、（" "）;関数の先頭（）で挿入された：これは、（重複する要素がない状態でいるため私たちが使用するCSS のfloatプロパティの不快な可能性があります）私達のギャラリーを格納するためのDIVの下にある任意のコンテンツをスクロールするように設計されています。
同じカテゴリの...
E -ラーニング
 |
CSS（コース）
W3C CSSやXHTMLに応じてWebデザインとアクセシビリティ。 29€から開始。 |
 |
HTML（コース）
29€からWeb用のマークアップ言語。 |
 |
ジャバスクリプト（コース）
クライアントサイドスクリプトへのガイドを完了します。 39€から。 |
スポンサーリンク