初期化しておきます)。13行目から25行目でコントロールを追加しています(クロスフェードのサンプルと同じ)。28行目の変数「is_animated」はアニメーション中かどうかを判定するものです(アニメーション中に、アイコン画像をクリックされると問題があるため)。設定して、アニメーション中であるとします。31行目は、変数「nextphoto」の値を1増加しています。デフォルトに設定しています。33行目では、変数「nextphoto」の値に対応するアイコン画像の要素にクラス「icon_selected」を追加してアニメーションを設定しています。34行目から41行目はスライダーのアニメーションの記述です。呼び出してスライダーを開始させています。52行目から86行目は、各画像に対応するアイコン画像をクリックした際の処理の記述です(詳細は別途記述)。88行目から98行目は、アイコン画像にマウスオーバーした際の処理の記述です(クラスの追加及び削除でスタイルを変更)。100行目から103行目は、ページを閉じた際に繰り返し処理を終了させる記述です。以下は、前述のスクリプトの52行目から86行目を抜粋したものです。場合)は何もせずに、終了する記述です。設定して、アニメーション中であるとしています。使ってクリックされたアイコン画像のインデックスを取得して変数「icon_index」に代入しています。スライダーの繰り返し処理を停止しています。9行目、10行目は、アイコン画像のスタイルを初期化して、その後アニメーションでアイコン画像の透明度を変更しています。11行目は、クリックされたアイコン画像のインデックスと、次に表示する画像のインデックスの差分を変数「diff」に代入しています。13行目は、「diff」の値の絶対値を取得しています(後の処理の計算で使用するため)。(負の値)の場合の処理です。(負の値)の場合、スライドする方向が逆になるため、画像を移動させる必要があります。20行目では、条件演算子(三項演算子)を使って移動(スライド)する距離(marginLeft)を算出して変数「dist」に代入しています。かけて、方向を逆転しています。21行目から32行目はスライダーのアニメーションの記述です。値をその分設定して、その後2つ分の距離スライドさせます。(14行目~19行目)通常の方向に画像を2つ分スライドさせるには、以下のように画像を2つ分の距離スライドさせて、その後2つの画像を移動させます。セキュリティ上の理由から、スクリプトからクライアントにデータを書き込むことは許されていませんが、クッキー(Cookie)だけは例外です。クライアント側に保存される小さなテキストファイルのことで、これを利用することによりスクリプトから何らかの情報を保存しておくことができます。JavaScriptのクッキーは暗号を使用していないので、セキュリティには配慮が必要です。概要cookieプロパティ(document.cookie)から値を読み出すと,ドキュメントに適用されるすべてのクッキーの名前と値が返されます。あると設定されています(ブラウザを終了すると、クッキーの値も削除される)。指定する必要があります。