簡単６■クリックでコメ付きスライド

<!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{
margin:50px auto 0;/*★画像の中央位置指定(上　左右　下)*/
width:370px;/*★画像横幅*/
height:245px;/*★画像縦幅*/
display: block;/*★ブロック要素指定。上記の中央位置指定を有効にする為*/
}

/*★必須。コメント用の指定*/
#Me{
margin:5px auto;/*★コメントの中央位置指定(上下　左右)*/
width:370px;/*★コメントの横幅=画像の横幅。変更しても可*/
text-align:center;/*★コメントの左右中央位置指定*/
}

/*★必須。スライド用のボタンのformの位置指定*/
#bt{
margin:20px auto;/*★ボタンのformの位置指定(上下　左右)*/
width:370px;/*★formの横幅=画像の横幅。変更しても可*/
text-align:center;/*★ボタンの左右中央位置指定*/
}
--></style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。id指定は必須。下の２行は画像とコメント指定-->
<img src="a1.jpg" id="Ga" alt=""><!--★画像指定。１番最初の画像のファイル名を記入。id="Ga"を必ず記入-->
<p id="Me">紫の花　きれいです</p><!--★コメント指定。１番最初のコメントを記入。id="Me"を必ず記入-->

<form id="bt">
<input type="button" value="次へ" id="bt3">
<input type="button" value="戻る" id="bt4">
</form>

<script type="text/javascript"><!--
(function (){var n=0, i=0; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像とコメントの同時指定。増減可能。['画像','コメント'];　の２個をこの順番で記述。コメントにタグも使用可能
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 Chga(flag) {i=i+flag; if(i>len-1){i=0;}; if(i<0){i=len-1;}; Ga.src=myurl+ga[i][0]; Me.innerHTML=ga[i][1];}
/*■ie11ではdocument.getElementByIdを省略したら動作しない*/
document.getElementById('bt3').onclick=function (){Chga(1);};//次へ
document.getElementById('bt4').onclick=function (){Chga(-1);};//戻る
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>
簡単６■クリックでコメ付きスライド 最終修正日 : 2016/01/20

　簡単６■クリックでコメ付きスライド　　　　最終修正日 : 2016/01/20
