本日  昨日
 
03/16(Sun) 02:56

o スライドショー
【お知らせ】スライドショーのループ回数を指定できるように機能追加しました(03.05.12)

スライドショーを行うスクリプトです。


設置方法

下の関数をヘッダ部<HEAD>〜</HEAD>に記述します。

  1. roop = 0;にループ回数を指定します。0にすると無限ループします。
  2. imgfile[0]=new Image(); imgfile[0].src="./jpg/renoir.jpg";にあなたの表示したい画像データのURLを指定します。画像の数はいくつでもOKです。
  3. timerID = setTimeout("slideShow()",2000);は画像を表示している時間です。2000ms=2秒になります。間隔を変更したい時はこの2000の値を変更します。

<script language="JavaScript"> <!-- // スライドショー by「菊池さん」 <http://kikuchisan.net/> if (document.images) { //イメージのpreload imgfile = new Array(); imgfile[0]=new Image(); imgfile[0].src="./jpg/renoir.jpg"; imgfile[1]=new Image(); imgfile[1].src="./jpg/mone.jpg"; imgfile[2]=new Image(); imgfile[2].src="./jpg/millet.jpg"; imgfile[3]=new Image(); imgfile[3].src="./jpg/doga.jpg"; } //スライドショー roop = 0; // ループ回数。0にすると無限ループします rcnt = 0; timerID = 0; indx = 0; function slideShow() { if (document.images && rcnt < roop*imgfile.length+1) { document.slideimg.src = imgfile[indx].src; indx++; if (indx >= imgfile.length) indx = 0; clearTimeout(timerID); timerID = setTimeout("slideShow()",2000); //2秒毎に表示切り換え } if (roop != 0) rcnt++; } //--> </script>

ページをオープンしたら関数slideShow()を実行するコマンドonLoad="slideShow()"をBODYダク内に記述します。

<BODY bgcolor="#FFE4C4" text="navy" onLoad="slideShow()">

画像を表示したい場所に下の文を記述します。

  1. renoir.jpgは最初に表示される画像です。
  2. name="slideimg"はslideShow()内のdocument.slideimg.srcと同じ名前にします。
  3. width="140" height="105"を指定しないとそれぞれの画像サイズになります。指定した場合は、このサイズに調整されます。
<center><img src="./jpg/renoir.jpg" name="slideimg" width="140" height="105"></center>

 
 
©1997- Kikuchisan's workshop All rights reserved //

スポンサーリンク

関連コンテンツ