手動スライドショー
ボタンを押すごとに次の画像に切り替わります。
使用する画像を用意して下さい。（ＧＩＦ，ＪＰＧ）
画像のファイル名を書き換えて下さい。（「プログラム①」の黒字の部分。）
最初に表示する画像と同じファイル名を、「プログラム②」の赤字の部分に書いて下さい。
説明文を好きなものに書き換えて下さい。（「プログラム①」の青字の部分。）
使った画像の数を書き換えて下さい。（「プログラム①」の赤字の部分。）
ボタン名も変えられます。（「プログラム①」のピンク字の部分。）
ＳＴＥＰ１
「プログラム①」をＨＴＭＬの上の方にコピーして下さい。
プログラム①
<script language="JavaScript">
<!--
var btnimg = new Array();
var btntext = new Array();
if(navigator.appVersion.charAt(0) >= 3 ){
for( i = 0 ; i < 4 ; i++
){
btnimg[i] = new Image();
btntext[i] = 0;
}
btnimg[0].src= "logo01.jpg";
btnimg[1].src= "01.jpg";
btnimg[2].src= "02.jpg";
btnimg[3].src= "03.jpg";
btntext[0] = "スライドショーの始まりです。";
btntext[1] = "１歳の頃、港に近い生まれた家で。
";
btntext[2] = "幼稚園の頃、よく遊んでいた資材置き場で。
";
btntext[1] = "小学校に入学する当日のピッカピッカの？一年生です。";
}
var number = 0;
function resetSlide(){
number = 0;
changeSlide();
}
function changeSlide( ){
if(navigator.appVersion.charAt(0) >= 3 ){
document.images['SC'].src = btnimg[number].src;
document.myForm.tArea.value = btntext[number];
if( number == btnimg.length-1 ){
number = 0;
document.myForm.nextBtn.value = "初めに戻る";
}else{
number++;
document.myForm.nextBtn.value = "次の画像へ";
}
}
}
//-->
</script>
|
ＳＴＥＰ２
「プログラム②」を表示したいところにコピーして下さい。
プログラム②
<p align="center">
<img src="logo01.jpg"
name="SC"> </p>
<form name="myForm">
<p align="center"><input
type="text" size="62"
name="tArea"> </p>
<p align="center"><input
type="button" name="nextBtn"
value="次の画像へ"
onclick="changeSlide()"> </p>
</form>
|
ＳＴＥＰ３
「プログラム③」の赤字の部分をＴＨＭＬのＢＯＤＹの中に追加して下さい。
プログラム③
<body bgcolor="#FFFFFF" onload="resetSlide()">
|
ページＴＯＰへ