スイッチで切替えるスライドショーの JavaScript |
戻 る |
スライドショーの特徴
・ スイッチを押す毎に、画像が切り替わるスライドショーです。
・ 「next」ボタンで次のスライドが始まり、「back」ボタンで戻ります。
・ 数値の設定だけで、画像表示が調整出来ます。
設定方法
まず、「ソースファイル」を、指示に従いコピーアンドペーストします。
（１）「表示をデザインする」の部分で、色に合わせて、次の設定をします。
■ スライドショー全体の左端からの空きを入れてください。
■ タイトル名を入れてください。
■ タイトル文字の文字の大きさと書体と色を、好みで変えてください。
■ タイトル名に代わり <img src="画像ファイル"> で画像も使えます。
■ スライドショー本体の、額縁の種類、額縁の太さ、額縁の色を、好みで変えてください。
※ 本項目の設定内容は、リンク先参照
■ その他の設定がわかる方は、好みに合わせて指定を変更してください。
■ タグの解る方は、テーブルを解体して、任意にレイアウトしてください。
<!-- ******************** 表示をデザインする ********************** -->
<table style="margin-left:100"><tr><td align="center">
<!-- タイトル -->
<span style="font:bold 16pt MS UI Gothic; color:#a06060">北アルプスの風景</span><br>
<!-- スライド本体 -->
<span id="slide" style="border:ridge 20 #eeeeee; margin:5 0"></span><br><br>
<!-- スイッチ -->
<span id="swit"></span>
</td></tr></table>
<!-- ************************* ここまで *************************** -->
（２）「入力事項」の部分で、色に合わせて、次の設定をします。 太字は入力可能場所。
■ 「0」から順にスライドする画像を、アドレスを含むファイル名で指定します。
■ 画面の表示幅は必ず入力してください。
■ 画面の高さの指定が「0」の場合、１枚目の画像の縦横比で決定されます。
■ 開始スイッチの画像が「0」ならば、停止スイッチの画像の指定は無効です。
■ その他、必要に応じて、指示に従い設定してください。
// *************************** 入力事項 *****************************
// ======= 入力１：スライド画像の設定 =======
// 出したい画像の種類を必要数だけ入力（0から順に）
// 注意！！ 画像（写真）の縦と横の比は一定に加工しておいて下さい
ugoku[ 0 ]=(" ../parts/sinho0.jpg ");
ugoku[ 1 ]=(" ../parts/sinho1.jpg ");
ugoku[ 2 ]=(" ../parts/sinho2.jpg ");
ugoku[ 3 ]=(" ../parts/sinho3.jpg ");
ugoku[ 4 ]=(" ../parts/sinho4.jpg ");
// ======= 入力２：その他の設定 =======
var haba=400; // 表示する幅（ピクセル）（初期値 400）
var taka=0; // 表示する高さ（ピクセル） 0ならば自動設定
var str="0"; // 開始スイッチの画像 0ならばボタン選択
var stp="../parts/stp.gif"; // 停止スイッチの画像
// ************************* 入力事項ここまで **************************
更新履歴
・05/06/10 ver 0.70 原画像の縦横比を読みとるように更新
・03/11/02 ver 0.60 デザインの指定法をタグで調整出来るように更新
・03/05/06 ver 0.00 スイッチ切り替え版を初公開
ソースファイル
・ 下記の部分をコピーアンドペーストして使って下さい。
・ <body>〜</body>の間の、
設置したい場所にペーストして（置いて）下さい。
<!-- ******************** 表示をデザインする ********************** -->
<table style="margin-left:100"><tr><td align="center">
<!-- タイトル -->
<span style="font:bold 16pt MS UI Gothic; color:#a06060">北アルプスの風景</span><br>
<!-- スライド本体 -->
<span id="slide" style="border:ridge 20 #eeeeee; margin:5 0"></span><br><br>
<!-- スイッチ -->
<span id="swit"></span>
</td></tr></table>
<!-- ************************* ここまで *************************** -->
・ 次に、<body>〜</body>の間の任意の場所に、下記の部分をコピーアンドペーストして下さい。
<script type="text/javascript">
<!--//_slide_swit00 ver0.70 （ぱーぷりんの溜まり場）
ugoku=new Array(); // この行は触らないで・・
// *************************** 入力事項 *****************************
// ======= 入力１：スライド画像のセッティング =======
// 出したい画像の種類を必要数だけ入力（0から順に）
// 注意！！ 画像（写真）の縦と横の比は一定に加工しておいて下さい
ugoku[ 0 ]=(" ../parts/sinho0.jpg ");
ugoku[ 1 ]=(" ../parts/sinho1.jpg ");
ugoku[ 2 ]=(" ../parts/sinho2.jpg ");
ugoku[ 3 ]=(" ../parts/sinho3.jpg ");
ugoku[ 4 ]=(" ../parts/sinho4.jpg ");
// ======= 入力２：その他のセッティング =======
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='slideback()'><img src='"+str+
"' border=0 hspace=20></span><span onclick='slidenext()'><img src='"+stp+
"' border=0 hspace=20></span>"; }
else { swit.innerHTML="<input type='button' value='back' onClick='slideback()'>"+
" <input type='button' value='next' onClick='slidenext()'>"; }
// ----- 関 数 -----
function slidenext(){
if( n >= mai ) { n=0; } else { n+=1; }
document.imgs.src=ugoku[n]; }
function slideback(){
if( n <= 0 ) { n=mai; } else { n-=1; }
document.imgs.src=ugoku[n]; }
//-->
</script>