面白１９■拡大スライド　コメ付

●2022/01/15：即時関数で囲んで、グローバル変数を消しました。
画像が拡大しながらスライドショーをする JavaScript です。
HTML5対応にして、ソースを簡略化しました。
原本の「とらねこ庵　http://homepage2.nifty.com/toraneko/index.html」はサイト消滅しています。

■コメ無しリンク無しの拡大スライドショーはこちら→　面白１９-０■拡大スライドショー
■コメ、リンク付きの拡大スライドショーはこちら→　面白１９-１■拡大スライドコメ、リンク付き
■コメント付きの縮小スライドショーはこちら→　面白２０■縮小スライドコメ付き

2022/01/14修正：画像指定とコメント指定を1行でできるようドッキング。setIntervalをsetTimeoutに統一。

<!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:370px;/*★画像横幅*/
height:245px;/*★画像縦幅*/
text-align:center;/*★画像の左右中央位置指定。拡大変化を中央起点にする*/
}

/*★必須。コメント用の指定。内容はお好みで*/
#Me{
margin:3px auto 50px;/*★コメントの中央位置指定(上　左右　下)*/
width:350px;/*★画像横幅より小さめ*/
text-align:center;/*★コメントの左右中央位置指定*/
border:1px solid #ccc; 
padding:5px;
}
</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/15
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 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 gaw=base.offsetWidth;  //画像横幅
var gah=base.offsetHeight; //画像縦幅
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,50); }
else{ clearTimeout(tm); k=0; w=gaw; h=gah; } //clearTimeout(tm)追加
}
reBigger();　　
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

面白１９■拡大スライド コメ付 最終修正日 : 2022/01/15

　面白１９■拡大スライド　コメ付　　　　最終修正日 : 2022/01/15