ボタンクリックで次の画像を見たり、前の画像を見たり出来ます。
写真や画像をたくさん掲載されている際に写真集や画像集としてご利用下さい。
ただし全て同じサイズの画像をご使用下さい。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
[ ソース ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
pic=new Array();
//表紙になる1番目の画像を指定する
pic[0]="syasinnsyuu.gif";
//2番目の画像を指定する
pic[1]="0.gif";
//3番目の画像を指定する
pic[2]="1.gif";
//4番目の画像を指定する
pic[3]="2.gif";
kazu=0;
pics=new Array();
for(i=0; i<pic.length; i++)
{ pics[i]=new Image(); pics[i].src=pic[i]; }
function img_load()
{
for(i=0; i<pic.length; i++)document.images["hidden"].src=pics[i].src;
}
function pic_hyouji(dotti)
{
if(kazu > -1 && kazu < pic.length)kazu+=dotti;
else if(kazu == -1 && dotti == 1)kazu=1;
else if(kazu == pic.length && dotti == -1)kazu=pic.length-2;
if(dotti == -1 && kazu < 0)alert("これより前の画像はありません。");
else if(dotti == 1 && kazu > pic.length-1)alert("これより後の画像はありません。");
else { document.images["mypic"].src=pics[kazu].src; }
}
//-->
</script>
</head>
<body onLoad="img_load();">
<table border="1" cellpadding="5">
<tr><td>
<img src="syasinnsyuu.gif" name="mypic" width="350" height="216" border="0" alt="サンプル画像"><br>
</td></tr>
<tr><td align="center">
<form>
<input type="button" value=" 前 へ " onClick="pic_hyouji(-1);"> <input type="button" value=" 次 へ " onClick="pic_hyouji(1);">
<img src="" name="hidden" width="1" height="1" border="0">
</form>
</td></tr>
</table>
・
・
・
</body></html>
[ 解説 ]
まず写真集（もしくは画像集）で使用する画像をご用意下さい。
何枚でも結構です。
次に画像のURLを指定します。
上から6行目〜9行目でURLを指定しています。
URLを記述している部分を、お好きなURLにご変更下さい。
サンプルでは、1番最初は表紙画像を指定しています。
また画像は4つ使用しています。
もっと多くの画像を使いたい場合は、
pic[3]="1.gif";
の行を増やします。
1行丸ごとコピーペーストしてください。
ただ注意点が一つあります。「pic[3]」の「3」の部分を一つ増やして「4」にして下さい。
同じ要領でどんどんコピーペーストして、数字部分及びURL部分を変更して下さい。
例えば1つ画像を増やしたい場合は、
| 変更前 | 変更後 |
|---|
pic=new Array();
pic[0]="syasinnsyuu.gif";
pic[1]="0.gif";
pic[2]="2.gif";
pic[3]="1.gif";
|
pic=new Array();
pic[0]="syasinnsyuu.gif";
pic[1]="0.gif";
pic[2]="2.gif";
pic[3]="1.gif";
pic[4]="4.gif";
|
上のようになります。
1番先頭の画像が表示されている状態で、「前へ」ボタンを押された場合、
また1番最後の画像が表示されている状態で「次へ」ボタンが押された場合の
メッセージを変更したい場合は、上から17行目と18行目にあるメッセージをご変更下さい。
また写真集のページに来た時に表示させたい表紙などは、そのままHTML内のimgタグ部分をご変更下さい。
下から12行目にある
<img src="syasinnsyuu.gif" name="mypic" width="350" height="216" border="0" alt="サンプル画像"><br>
に、最初の画像URLをお書き下さい。
また、サイズなども自由にご変更下さい。
スクリプト以外のhtml部分に関しましては、お好きなようにデザインして下さい。
|
