戻る|
スライドショー |
◆スライドショー◆ |
■■１■■
[概要]
一定時間ごとに画像を変えて、スライドショーを作る
[参照]
メルマガ Vol.18
[ソース]
<HTML>
<HEAD>
<TITLE>スライドショー</TITLE>
<SCRIPT language="JavaScript">
<!--
//初期設定
var num = 0;
var img_num = 4;
//表示する画像の数
/*画像のプレロード*/
image = new Array();
//画像のＵＲＬを入れる
image[0] = new Image();
//ここと
image[0].src = "img1.gif";
//ここは対応。以下も同じ
image[1] = new Image();
image[1].src = "img2.gif";
image[2] = new Image();
image[2].src = "img3.gif";
image[3] = new Image();
image[3].src = "img4.gif";
/*このあと好きなだけ増やせる*/
//スライドショー関数
function slideshow(){
if(img_num > num){
document.myImg.src = image[num].src;
num++;
//切り替えの間隔
show=setTimeout("slideshow()",1000);
}
else{
num = 0;
slideshow();
}
}
//スライドショー停止関数
function end(){
clearTimeout(show);
}
//-->
</SCRIPT>
</HEAD>
<BODY>
ボタンを押してスライドショーを見よう！
<hr>
<input type="button" value="開始" onClick="slideshow()">
<input type="button" value="停止" onClick="end()">
<p>
<!--画像表示部-->
<img border=0 src="img1.gif" name="myImg">
</BODY>
</HTML>
※赤は変更点
※緑はコメント（そのまま貼り付けても大丈夫）