|
|
|
03/16(Sun) 01:32
 スライドショー
【お知らせ】スライドショーのループ回数を指定できるように機能追加しました(03.05.12)
スライドショーを行うスクリプトです。
■ 設置方法
■下の関数をヘッダ部<HEAD>〜</HEAD>に記述します。
- roop = 0;にループ回数を指定します。0にすると無限ループします。
- imgfile[0]=new Image(); imgfile[0].src="./jpg/renoir.jpg";にあなたの表示したい画像データのURLを指定します。画像の数はいくつでもOKです。
- timerID = setTimeout("slideShow()",2000);は画像を表示している時間です。2000ms=2秒になります。間隔を変更したい時はこの2000の値を変更します。
|
<![CDATA[
<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ダク内に記述します。
|
<![CDATA[
<BODY bgcolor="#FFE4C4" text="navy" onLoad="slideShow()">
]]>
|
■画像を表示したい場所に下の文を記述します。
- renoir.jpgは最初に表示される画像です。
- name="slideimg"はslideShow()内のdocument.slideimg.srcと同じ名前にします。
- width="140" height="105"を指定しないとそれぞれの画像サイズになります。指定した場合は、このサイズに調整されます。
|
<![CDATA[
<center><img src="./jpg/renoir.jpg" name="slideimg" width="140" height="105"></center>
]]>
|
|
|
