});});</script>大きな画像をスライド(サンプル4)「サンプル3」の画像1枚分スライドさせるもので大きな画像を表示してみる。サンプル4画像の枚数は最低3枚必要。大きな画像を表示するためにそれぞれの要素の高さと幅や位置を変更するだけ。前のサンプルとほぼ同じ。});});</script>カルーセルではなくスライドさせる(サンプル5)前述のカルーセルの場合、最低でもパネルの数は3つ必要で2つ以下の場合はうまく機能しない。カルーセルではなく(1周すると元のパネルに戻るのではなく)、単に「前へ」または「次へ」の方向にスライドさせるようにする。「サンプル1」と同じ。ul.panel)が表示されているかにより、「前へ」または「次へ」のボタンを表示するかどうかを判定して表示。});});</script>表示されているパネルがわかるようにする(サンプル5-2)サンプル5-2サンプル5のように位置により「前へ」または「次へ」のボタンの表示を変更するのではなく、以下のようにする。最後のパネルが表示されていて「次へ」をクリックしたら最初のパネルへ移動このため、どのパネルが表示されているかがわかりやすいように、それを表す画像を追加。重複する記述が増えるので、パネルをスライドさせる処理を「animate_panel()」、「パネルの数を表す画像のリンク」の背景画像を設定する処理を「icon_setup()」という関数にしておく。「パネルの数を表す画像のリンク」をクリックした場合の処理は、現在表示されているパネルとクリックされた「パネルの数を表す画像のリンク」の位置関係からスライドさせる量を調整。サンプル5と同じように画像の位置により「前へ」または「次へ」のボタンを表示するかどうかを判定して表示。(サンプル5の場合はパネルの位置で判定)また、「先頭」と「最後」というボタンを作成し、その位置へスライドするようにする。});});</script>大きな画像をスライド(サンプル7)サンプル7サンプル4と同じように大きな画像をスライドさせる。サンプル4とほぼ同じ(「先頭」と「最後」というボタンを追加)。サンプル6とほぼ同じ。パネルではなく画像1枚をスライドさせるので、現在表示されている画像のインデックス(current_image)での比較が多少異なる。});});</script>表示されている画像がわかるようにする(サンプル8)サンプル8今までの方法を組み合わせたもの。サンプル7とほぼ同じ(どの画像が表示されているかを示す画像を追加)。