面白２０■縮小スライド　コメ付

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>面白２０■縮小スライド　コメ付</title>

<!--★ここからコピー-->
<style>
/*★必須。スライド画像用の指定*/
#base{
margin:50px auto 0;/*★画像の中央位置指定(上　左右　下)*/
width:100%;/*★★注意!! 必ず画像横幅は100%指定にする★★*/
height:245px;/*★画像縦幅*/
text-align:center;/*★画像の左右中央位置指定。拡大変化を中央起点にする*/
}

#base img{border-bottom: 30px solid #000;}/*★画像の下側だけ黒い枠線。不要なら削除*/

/*★必須。コメント用の指定。内容はお好みで*/
#Me{
margin:10px auto 50px;/*★コメントの中央位置指定(上　左右　下)*/
width:350px;/*★画像横幅より小さめ*/
text-align:center;/*★コメントの左右中央位置指定*/
color:#fff;/*★コメントの文字の色指定。白色*/
}
</style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。下の２行は画像とコメント指定-->

<div id="base"><img id="gazo" src="fr1.jpg"></div><!--★画像指定。id="base" と最初の画像名と id="gazo" を必ず記述-->
<p id="Me">遠くを見つめる猫</p><!--★コメント指定。１番最初のコメを記入。id="Me"を必ず記入-->

<script type="text/javascript"><!--
/*===========================================================
縮小スライドショー・コメント付き　　HTML5対応とソースの簡略化。2022/01/23
by とらねこ庵 http://homepage2.nifty.com/toraneko/index.html(サイト消滅)　
=============================================================*/
(function (){var n=0; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像とコメントの同時指定。増減可能。['画像','コメント'];　の２個をこの順番で記述。コメントにタグも使用可能
var ga= new Array;
ga[n++]=['fr1.jpg','遠くを見つめる猫'];
ga[n++]=['fr2.jpg','オレンジ色の夕日'];
ga[n++]=['fr3.jpg','ゆっくり歩くスマトラ虎'];
ga[n++]=['fr4.jpg','大空を見上げるヒマワリ'];
ga[n++]=['fr5.jpg','プラハの街の<span style="color:red;">赤い</span>屋根'];

var myurl='';    //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
var gaw=370;     //★画像横幅
var gah=245;     //★画像縦幅
var speed=5000;  //★スライド切替速度　1000=1秒

//指定ここまで----------------------------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
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];}

var i=0,k=0,w=gaw,h=gah;
var tm=null;//追加

function reBigger(){
$("gazo").src =myurl+ga[i%len][0]; $("Me").innerHTML=ga[i%len][1];
gazoZoom(); i++; tm2=setTimeout(reBigger,speed);
}

function gazoZoom(){	
$("gazo").style.width=w/k+"px";
$("gazo").style.height=h/k+"px";
k=k+0.02;
if(k<=1){ tm=setTimeout(gazoZoom,30); }
else{ clearTimeout(tm); k=0; w=gaw; h=gah; } //clearTimeout(tm)追加
}
reBigger();　　
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>
面白２０■縮小スライド コメ付 最終修正日 : 2022/01/23

　面白２０■縮小スライド　コメ付　　　　最終修正日 : 2022/01/23
