面白１９■拡大スライド　コメ、リンク付

●2022/01/15：即時関数で囲んで、グローバル変数を消しました。
画像が拡大しながらスライドショーをする JavaScript で、コメントとリンク付きです。
HTML5対応にして、ソースを簡略化しました。

画像マウスオンでスライドショーが一時停止するように作成しています。
しかしブラウザによっては、一時停止しない方が、リンク先から戻った時の画像が乱れません。
もし一時停止を削除したい場合は、JavaScript のソースの下方の注意書きの付いた一行を削除して下さい。

原本の「とらねこ庵　http://homepage2.nifty.com/toraneko/index.html」はサイト消滅しています。

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

<!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>

<!--★ここからコピー-->

<p style="text-align:center; color:red;">画像マウスオンで停止します。</p>

<!--★下の２行は画像とコメントとリンク指定-->
<!--★下記の画像指定はid="base" と id="Lk"と最初の画像名と id="gazo" を必ず記述。
リンクターゲット target="_new" は自由に変更可-->

<div id="base"><a href="" target="_new" id="Lk"><img id="gazo" src="fr1.jpg"></a></div>
<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++]=['a1.jpg','紫の花　きれいです','http://iam-k.com/HIRAI/pageall.html'];
ga[n++]=['a2.jpg','オレンジの花　きれいです','http://kingo999.blog.fc2.com/blog-entry-546.html'];
ga[n++]=['a3.jpg','ハスの花　これもきれい','http://yu77799.g1.xrea.com/'];
ga[n++]=['a4.jpg','コスモスは　風にゆれてる','http://eigokiji.cocolog-nifty.com/blog/'];
ga[n++]=['a5.jpg','青い空　この世界はほんとうに<span style="color:red;">きれい</span>です','https://www.youtube.com/watch?v=yLzg6tpHMmY'];

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 tm1=null,tm2=null;//追加

function reBigger(){
$("gazo").src =myurl+ga[i%len][0]; $("Me").innerHTML=ga[i%len][1];
$("Lk").href=ga[i%len][2];
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){ tm1=setTimeout(gazoZoom,50); }
else{ clearTimeout(tm1); k=0; w=gaw; h=gah; } //clearTimeout(tm1)追加
}
reBigger();　　

/*★★画像マウスオン停止が不要なら下記1行は削除。
↓↓ブラウザによってはこの行を削除した方が、リンク先から戻った時の画像が乱れない。*/

$("gazo").onmouseout=reBigger; $("gazo").onmouseover=function (){clearTimeout(tm2);return false;}

}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

面白１９■拡大スライド コメ、リンク付 UP日時 : 2022/01/15

　面白１９■拡大スライド　コメ、リンク付　　　　UP日時 : 2022/01/15