セレクトボックスで選択するスライドショーの JavaScript |
戻 る |
スライドショーの特徴
・ セレクトボックスで選択して、画像を切り替えるスライドショーです。
・ 数値の設定だけで、画像表示が調整出来ます。
設定方法
まず、「ソースファイル」を、指示に従いコピーアンドペーストします。
（１）「表示をデザインする」の部分で、色に合わせて、次の設定をします。
■ スライドショー全体の左端からの空きを入れてください。
■ タイトル名を入れてください。
■ タイトル文字の文字の大きさと書体と色を、好みで変えてください。
■ タイトル名に代わり <img src="画像ファイル"> で画像も使えます。
■ スライドショー本体の、額縁の種類、額縁の太さ、額縁の色を、好みで変えてください。
※ 本項目の設定内容は、リンク先参照
■ その他の設定がわかる方は、好みに合わせて指定を変更してください。
■ タグの解る方は、テーブルを解体して、任意にレイアウトしてください。
<!-- ****************** 表示をデザインする ************************ -->
<table style="margin-left:100"><tr><td align="center">
<!-- タイトル -->
<span style="font:bold 16pt HG正楷書体-PRO; color:#904060">北アルプスの風景</span><br>
<!-- スライド本体 -->
<span id="slide" style="border:ridge 15 #e080a0; margin:5 0"></span><br>
<!-- スイッチ -->
<form name="myform"></form>
</td></tr></table>
<!-- ************************* ここまで *************************** -->
（２）「入力事項」の部分で、色に合わせて、次の設定をします。 太字は入力可能場所。
■ 「0」から順にスライドする画像を、アドレスを含むファイル名で指定します。
■ 画像に対応した見出しを、画像ファイルの右側に記入します。
■ 画面の表示幅は必ず入力してください。
■ 画面の高さの指定が「0」の場合、１枚目の画像の縦横比で決定されます。
■ その他、必要に応じて、指示に従い設定してください。
// *************************** 入力事項 *****************************
// ======= 入力１：スライド画像の設定 =======
// 出したい画像の種類を必要数だけ入力（0から順に）
// 右側は、その写真の選択名を入れてください
// 注意！！ 画像（写真）の縦と横の比は一定に加工しておいて下さい
ugoku[ 0 ]=new Array("../parts/sinho0.jpg", "ビッグバーン");
ugoku[ 1 ]=new Array("../parts/sinho1.jpg", "笠 岳");
ugoku[ 2 ]=new Array("../parts/sinho2.jpg", "西穂高岳");
ugoku[ 3 ]=new Array("../parts/sinho3.jpg", "西穂山荘");
ugoku[ 4 ]=new Array("../parts/sinho4.jpg", "焼 岳");
// ======= 入力２：その他の設定 =======
var haba = 400; // 表示する画像幅（ピクセル）（初期値 400）
var taka = 0; // 表示する高さ（ピクセル） 0ならば自動設定
// *********************** 入力事項ここまで ***************************
更新履歴
・05/06/10 ver 0.20 原画像の縦横比を読みとるように更新
・03/11/02 ver 0.10 デザインの指定法をタグで調整出来るように更新
・03/10/14 ver 0.00 初 公 開
ソースファイル
・ 下記の部分をコピーアンドペーストして使って下さい。
・ <body>〜</body>の間の、
設置したい場所にペーストして（置いて）下さい。
<!-- ****************** 表示をデザインする ************************ -->
<table style="margin-left:100"><tr><td align="center">
<!-- タイトル -->
<span style="font:bold 16pt HG正楷書体-PRO; color:#904060">北アルプスの風景</span><br>
<!-- スライド本体 -->
<span id="slide" style="border:ridge 15 #e080a0; margin:5 0"></span><br>
<!-- スイッチ -->
<form name="myform"></form>
</td></tr></table>
<!-- ************************* ここまで *************************** -->
・ 次に、<body>〜</body>の間の任意の場所に、下記の部分をコピーアンドペーストして下さい。
<script type="text/javascript">
<!--// slide_swit01 ver0.20 （ぱーぷりんの溜まり場）
ugoku=new Array(); // この行は触らないで・・
// *************************** 入力事項 *****************************
// ======= 入力１：スライド画像の設定 =======
// 出したい画像の種類を必要数だけ入力（0から順に）
// 右側は、その写真の選択名を入れてください
// 注意！！ 画像（写真）の縦と横の比は一定に加工しておいて下さい
ugoku[ 0 ]=new Array("../parts/sinho0.jpg", "ビッグバーン");
ugoku[ 1 ]=new Array("../parts/sinho1.jpg", "笠 岳");
ugoku[ 2 ]=new Array("../parts/sinho2.jpg", "西穂高岳");
ugoku[ 3 ]=new Array("../parts/sinho3.jpg", "西穂山荘");
ugoku[ 4 ]=new Array("../parts/sinho4.jpg", "焼 岳");
// ======= 入力２：その他の設定 =======
var haba = 400; // 表示する画像幅（ピクセル）（初期値 400）
var taka = 0; // 表示する高さ（ピクセル） 0ならば自動設定
// *********************** 入力事項ここまで ***************************
var mai=ugoku.length-1; // 写真の全枚数
var n=0;
// 画像の設定
first_img = new Image(); first_img.src = ugoku[0][0];
slide.innerHTML="<img name='imgs' src='"+ugoku[0][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";
// コントロールスイッチの設定
var temp='';
for(i=0; i<=mai; i++){
temp=temp+'<option>'+ugoku[i][1]+'</option>'; }
myform.innerHTML="<select name='swit' onChange='changeImage()'>"+temp+"</select>";
// ----- 関 数 -----
function changeImage(){
num=document.myform.swit.selectedIndex;
document.imgs.src=ugoku[num][0]; }
// end -->
</script>