簡単１０■盛ります！スライドショー

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>簡単１０■盛ります！スライドショー</title>

<!--★コピーここから-->
<style type="text/css"><!--
/*★必須。スライド画像用の指定*/
#Ga{
width:370px;/*★画像横幅*/
height:245px;/*★画像縦幅*/
}

/*★必須。コメント用の指定*/
#Me{
margin-top:5px;/*★上からの位置指定*/
width:370px;/*★横幅=画像の横幅*/
height:20px;/*★縦幅*/
line-height:20px;/*★行間指定。コメントの縦幅と同じ数値にすると上下中央位置になる*/
border:1px solid #aaa;/*★枠線　濃い灰色*/
background:#fff;/*★背景色　白色*/
color:"000;/*★文字色　黒色*/
text-align:left;/*★コメントの左寄せ*/
text-indent:1em;/*★コメントの左から１字下げ*/
display:inline-block;/*★インラインブロック要素指定。tableの中央位置指定を有効にする為*/
}

/*★必須。スライド用のサブタイトルの位置指定*/
#Sb{
margin-top:10px;/*★上からの位置指定*/
width:370px;/*★横幅=画像の横幅*/ 
font-size:12px;/*★文字サイズ指定*/
background: #aaa;/*★背景色　濃い灰色*/
color:#fff;/*★文字色　白色*/
display:inline-block;/*★インラインブロック要素指定。tableの中央位置指定を有効にする為*/
}

/*★全体をtableの中に配置しています*/
.tbS{
margin:50px auto ;/*★全体のtableの位置指定(上下　左右)*/
border-spacing:0px;/*★セル同士の隙間を消す*/
border:1px solid #000;/*★全体のtableの枠線指定　黒*/
}
--></style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。id指定は必須。tableで位置指定をしています。お好みで-->

<table class="tbS"><tr><td style="width:20px; background:#aaa;"></td>
<td style="text-align:center; vertical-align:middle; width:600px; background:#eee;">

<p id="Sb">５枚中１枚目表示</p><!--★サブタイトル指定。１番最初のサブタイトルを記入。id="Sb"を必ず記入-->
<img src="a1.jpg" id="Ga" alt=""><!--★画像指定。１番最初の画像のファイル名を記入。id="Ga"を必ず記入-->
<p id="Me">紫の花　きれいです</p><!--★コメント指定。１番最初のコメントを記入。id="Me"を必ず記入-->

</td>
<td style="text-align:center; vertical-align:middle; width:50px; background:#aaa;">

<form>
<input type="button" value="次へ" id="bt3"><br>
<input type="button" value="戻る" id="bt4"><br>
<br>
<input type="button" value="自動" id="bt1"><br>
<input type="button" value="停止" id="bt2"><br>
</form>

</td></tr></table>

<script type="text/javascript"><!--
/*==============================================================================
自動でもクリックでも動作する、コメントとサブタイトル付きスライドショー ★2016/01/20
参考フリーソフト 「すなねぃる!!」 By  http://homepage3.nifty.com/metis/ 
================================================================================*/
(function (){var i=0, n=0, tm; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像とコメントの同時指定。増減可能。['画像','コメント','サブタイトル'];　の３個をこの順番で記述。タグも使用可能
var ga= new Array;
ga[n++]=['a1.jpg','紫の花　きれいです','５枚中１枚目表示'];
ga[n++]=['a2.jpg','オレンジの花　きれいです','５枚中２枚目表示'];
ga[n++]=['a3.jpg','ハスの花　これもきれい','５枚中３枚目表示'];
ga[n++]=['a4.jpg','コスモスは　風にゆれてる','５枚中４枚目表示'];
ga[n++]=['a5.jpg','青い空　この世界はほんとうに<span style="color:red;">きれい</span>です','５枚中５枚目表示'];

var myurl='';      //★画像パス。文書とは別のフォルダーなどに入っている時は指定
var spd=3000;　    //★画像切替時間 1000=1秒

var load=new Array();//画像先読み込み。切替をスムーズにする
for (var p=0,len=ga.length; p<len; p++){load[p]=new Image();load[p].src=myurl+ga[p][0];}
function Show(){ 
i++; if (i>=len){i=0;}; Ga.src=myurl+ga[i][0]; Me.innerHTML=ga[i][1]; Sb.innerHTML=ga[i][2]; 
tm=setTimeout(Show,spd);
}
function Chga(mode){
if(mode===0) { ++i; if(i>=len){i=0;}} else{ --i; if(i<0){i=len-1;}};
Ga.src=myurl+ga[i][0]; Me.innerHTML=ga[i][1]; Sb.innerHTML=ga[i][2];
}
/*■ie11ではdocument.getElementByIdを省略したら動作しない*/
document.getElementById('bt1').onclick=function (){clearTimeout(tm);Show();};//自動
document.getElementById('bt2').onclick=function (){clearTimeout(tm);};//停止
document.getElementById('bt3').onclick=function (){clearTimeout(tm);Chga(0);};//次へ
document.getElementById('bt4').onclick=function (){clearTimeout(tm);Chga(1);};//戻る
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>
簡単１０■盛ります！スライドショー 最終修正日 : 2016/01/20

　簡単１０■盛ります！スライドショー　　　　最終修正日 : 2016/01/20
