シンプルなスライドショーの JavaScript |
戻 る |
|
兵庫県八千代町の風景 スライド本体 スイッチ |
・ 一定の時間毎に、画像が切り替わるスライドショーです。 ・ 「開始」ボタンでスライドが始まり、「停止」ボタンで止まります。 ・ 数値の設定だけで、画像表示が調整出来ます。
まず、「ソースファイル」を、指示に従いコピーアンドペーストします。 （１）「表示をデザインする」の部分で、色に合わせて、次の設定をします。 ■ スライドショー全体の左端からの空きを入れてください。 ■ タイトル名を入れてください。 ■ タイトル文字の文字の大きさと書体と色を、好みで変えてください。 ■ タイトル名に代わり <img src="画像ファイル"> で画像も使えます。 ■ スライドショー本体の、額縁の種類、額縁の太さ、額縁の色を、好みで変えてください。 ※ 本項目の設定内容は、リンク先参照 ■ その他の設定がわかる方は、好みに合わせて指定を変更してください。 ■ タグの解る方は、テーブルを解体して、任意にレイアウトしてください。 <!-- ******************** 表示をデザインする ********************** --> <table style="margin-left:100"><tr><td align="center"> <span style="font:bold 14pt ＭＳ ゴシック; color:#606060">兵庫県八千代町の風景 </span><br> <span id="slide" style="border:ridge 20 #b0b0b0; margin:5 0">スライド本体</span><br> <span id="swit">スイッチ</span> </td></tr></table> <!-- ************************* ここまで *************************** --> （２）「入力事項」の部分で、色に合わせて、次の設定をします。 太字は入力可能場所。 ■ 「0」から順にスライドする画像を、アドレスを含むファイル名で指定します。 ■ 画面の表示幅は必ず入力してください。 ■ 画面の高さの指定が「0」の場合、１枚目の画像の縦横比で決定されます。 ■ 開始スイッチの画像が「0」ならば、停止スイッチの画像の指定は無効です。 ■ その他、必要に応じて、指示に従い設定してください。 // *************************** 入力事項 ***************************** // ======= 入力１：スライド画像の設定 ======= // 出したい画像の種類を必要数だけ入力（0から順に） // 注意！！ 画像（写真）の縦と横の比は一定に加工しておいて下さい ugoku[ 0 ]=(" ../parts/pic1.jpg "); ugoku[ 1 ]=(" ../parts/pic2.jpg "); ugoku[ 2 ]=(" ../parts/pic3.jpg "); ugoku[ 3 ]=(" ../parts/pic4.jpg "); ugoku[ 4 ]=(" ../parts/pic5.jpg "); // ======= 入力２：その他の設定 ======= var pitch=3.0; // スライドする間隔（秒）（初期値 3.0） var haba=400; // 表示する幅（ピクセル）（初期値 400） var taka=0; // 表示する高さ（ピクセル） 0ならば自動設定 var str="0"; // 開始スイッチの画像 0ならばボタン選択 var stp="../parts/stp.gif"; // 停止スイッチの画像 // ************************* 入力事項ここまで **************************
<!-- ******************** 表示をデザインする ********************** --> <table style="margin-left:100"><tr><td align="center"> <span style="font:bold 14pt ＭＳ ゴシック; color:#606060">兵庫県八千代町の風景</span><br> <span id="slide" style="border:ridge 20 #b0b0b0; margin:5 0">スライド本体</span><br> <span id="swit">スイッチ</span> </td></tr></table> <!-- ************************* ここまで *************************** -->
<script type="text/javascript">
<!--// slide_auto00 ver0.70 （ぱーぷりんの溜まり場）;
ugoku=new Array(); // この行は触らないで・・;
// *************************** 入力事項 *****************************
// ======= 入力１：スライド画像の設定 =======
// 出したい画像の種類を必要数だけ入力（0から順に）
// 注意！！ 画像（写真）の縦と横の比は一定に加工しておいて下さい
ugoku[ 0 ]=(" ../parts/pic1.jpg ");
ugoku[ 1 ]=(" ../parts/pic2.jpg ");
ugoku[ 2 ]=(" ../parts/pic3.jpg ");
ugoku[ 3 ]=(" ../parts/pic4.jpg ");
ugoku[ 4 ]=(" ../parts/pic5.jpg ");
// ======= 入力２：その他の設定 =======
var pitch=3.0; // スライドする間隔（秒）（初期値 3.0）
var haba=400; // 表示する幅（ピクセル）（初期値 400）
var taka=0; // 表示する高さ（ピクセル） 0ならば自動設定
var str="0"; // 開始スイッチの画像 0ならばボタン選択
var stp="../parts/stp.gif"; // 停止スイッチの画像
// ************************* 入力事項ここまで **************************
var mai=ugoku.length-1; // 写真の全枚数
var n=0;
// 画像の設定
first_img = new Image(); first_img.src = ugoku[ 0 ];
slide.innerHTML="<img name='imgs' src='"+ugoku[0]+"'>";
w_img=document.imgs.width; h_img=document.imgs.height;
imgs.style.width = haba;
if (taka==0){ taka = haba*h_img/w_img }
slide.style.height=taka;
slide.style.backgroundColor="#ffffff";
slide.style.overflow="hidden";
// コントロールスイッチの設定
if (str!=0) { swit.innerHTML="<span onclick='slideshow()'><img src='"+str+
"' border=0 hspace=20></span><span onclick='end()'><img src='"+stp+
"' border=0 hspace=20></span>"; }
else { swit.innerHTML="<input type='button' value='開始' onClick='slideshow()'>"+
" <input type='button' value='停止' onClick='end()'>"; }
// ----- 関 数 -----
function slideshow(){
document.imgs.src=ugoku[n];
if( n >= mai ) { n=0; } else { n+=1; }
show=setTimeout("slideshow()",1000*pitch); }
function end(){
clearTimeout(show); }
//-->
</script>