「陽だまり」ホームページ > パソコンお助け情報INDEX > Webページ作成 INDEX

途中で前進・後退できるスライドショー

パソコンお助け情報

ホームページ作成

困った ブラウザでの説明と写真を表示するスライドショーの途中で戻ったり進んだりするにはどうしたらよいか。

解決した 2つの方法を紹介します。

別項スライドショーの説明と同じく、説明と写真を表示するHTMLファイルが、photo1.html、photo2.html、photo3.html、photo4.html、photo5.htmlの5個があり、スライドショーを実行するページがslideshow.htmlとし、既に自動的に順に表示されるように設定されているものとします。

ボタンをつけて制御する

photo1.htmlからphoto5.htmlのそれぞれのページに次のように「進む」「戻る」「停止」のボタンを作ります。
サンプルファイルへJavaScript を使っています。

<form>
<input type=button value="戻る" onclick="history.back()">
<input type=button value="進む" onclick="history.forward()">
<input type=button value="停止" onclick="clearTimeout()">
</form>

「停止」はこのままでは機能しませんので、次のように変更します。

この場合「進む」は既に表示した(来歴)ページへ進むもので、来歴が無い場合はなにも動きません。「戻る」も同様。(ブラウザの「進む」「戻る」ボタンと同じです。)

ボタンの画像にリンクで戻ったり進んだりする

photo1.htmlからphoto5.htmlのそれぞれのページに「GO」「BACK」「STOP」のボタンの画像をそれぞれ go.jpg、back.jpg、stop.jpg のファイル名で配置して、リンクとJavaScript(停止の場合)を設定します。(<a>要素はインライン要素ですから、<div>要素の中に入れます。)サンプルファイルへJavaScript を使っています。

<a href="前のページ.html"><img src="back.jpg" with="xx" height="yy" alt="戻る"></A>
<a onClick="clearTimeout(s)><img src="stop.jpg" with="xx" height="yy" alt="停止"></A>
<a href="次のページ.html"><img src="go.jpg" with="xx" height="yy" alt="進む"></A>

「前のページ」「次のページ」はそれぞれ表示するページのファイル名。 xxとyyはボタン画像のサイズ。
この場合は、「戻る」「進む」は履歴に関係なく出来ます。「STOP」画像をクリックするとスライドショーを停止します。スライドショーを継続する場合は「GO」か「BACK」の画像をクリックします。(2005/7/13 UP 2005/7/18修正)


「陽だまり」ホームページ > パソコンお助け情報INDEX > Webページ作成 INDEX

作成&連絡先 NET・陽だまり