面白４■ CSS+JS 拡大縮小スライド+コメ付

<!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>面白４■ CSS+JS 拡大縮小スライド+コメ付</title>

<!--★コピーここから-->
<style type="text/css"><!--
/*★必須。スライド画像の位置指定。位置指定は必ずposition:●●(何でも使いやすい指定で);が必要*/
#base{
position:relative;
margin:50px auto 100px;/*★水平中央位置指定(上、左右、下)*/
width:370px;/*★スライド画像の横幅*/
height:245px;/*★スライド画像の縦幅*/
}
/*★必須。スライド画像用の指定*/
#Ga1,#Ga2{
/*■↓ここでスライド画像のサイズ指定は絶対にしないこと！！！動作がおかしくなります■*/
position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;/*★必須。拡大縮小の基準点を画像中央にする*/
transition:1s ease-in-out;/*★必須。拡大縮小の変化時間。1sは１秒*/
box-shadow:5px 5px 5px #888;/*★ここからの３行の装飾はお好みで。影指定*/
border-radius: 25px 0px;/*★左上と右下の角丸指定*/
border:solid 1px #fff;/*★枠線白色指定*/
}
/*★必須。コメント用の指定*/
#Me1,#Me2{
position:absolute;/*★必須。#baseを位置の基準にするため*/
transition:0.5s ease 1s;/*★必須。最初の0.5sはコメントのフェード変化時間の0.5秒。最後の1sは変化時間を１秒遅らせる指定*/
width:370px;/*★コメントの横幅=スライド画像の横幅。変更しても可*/
bottom:-50px;left:0;/*★#baseを基準にした位置指定。マイナス指定で、スライド画像の下の位置*/
border:1px solid #ccc;/*★コメントの枠線　灰色*/
padding:3px 15px;/*★コメントの余白(上下　左右)*/
box-sizing: border-box;/*★コメント領域内にパディング領域及びボーダー領域も含む*/
}
--></style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<!--★コピーここから。画像位置指定。id="base"は必須-->
<div id="base"></div>

<script type="text/javascript"><!--
/*-============================================================================================
CSS3+JavaScriptで拡大・縮小・コメ付きのスライドショー　　　★2015/09/12　
参考サイト(フェードから改造)：http://www.red.oit-net.jp/tatsuya/java/sshow2.htm (イヌでもわかるJavaScript講座)
変化基準を上下左右の中央から：By　http://c-brains.jp/blog/wsg/14/08/06-100100.php (バシャログ。)
==============================================================================================*/
var n=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 gw=370;         //★画像横幅。単位px。縦幅は同比率で自動変更になる
var spd=4000;　     //★画像切替時間 1000=1秒 スライド速度。CSS指定のフェード変化時間より長くする

var load=new Array();//画像先読み込み。切替をスムーズにする
for (var p=0;p<ga.length;p++){load[p]=new Image();load[p].src=myurl+ga[p][0];}
var i=-1;		          //現在表示している配列番号
var myflg=0;		          //どっちを拡大、表示して、どっちを縮小、非表示するかのフラグ
function myChange(){              /*スライドショーメイン関数*/
i= (i<ga.length-1) ? i+1 : 0;　　 //次の配列番号
myflg=(myflg==0) ? 1 : 0;         //フラグ反転
if (myflg==0){
Ga1.src=myurl+ga[i][0]; Ga1.style.width=gw+"px"; Ga2.style.width=0+"px";
Me1.innerHTML=ga[i][1]; Me1.style.opacity=1; Me2.style.opacity=0; }//次の画像とコメントをセット。拡大表示。縮小非表示
else{
Ga2.src=myurl+ga[i][0]; Ga1.style.width=0+"px"; Ga2.style.width=gw+"px";
Me2.innerHTML=ga[i][1]; Me1.style.opacity=0; Me2.style.opacity=1; }//次の画像とコメントをセット。縮小非表示。拡大表示
setTimeout( "myChange()",spd);    //指定速度周期にスライドを更新する
}	
var sss='<img src="" id="Ga1"><img src="" id="Ga2">';
sss+='<div id="Me1">　</div><div id="Me2">　</div>';
document.getElementById("base").innerHTML=sss;
window.onload=myChange;
// --></script>
<!--★コピーここまで-->

<br><br><br>
</body>
</html>
面白４■ CSS+JS 拡大縮小スライド+コメ付 UP日時 : 2015/09/12

　面白４■ CSS+JS 拡大縮小スライド+コメ付　　　　UP日時 : 2015/09/12
