フェード８-２■フェードでサイズ違い実寸表示コメ、リンク付き

<!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>
body{background:#db9;}/*★背景色薄茶色*/

/*★必須。スライド画像の位置指定と、枠(paddingやborder)などの装飾。位置指定は必ずposition:●●(何でも使いやすい指定で);が必要*/
#bs{
position:relative;/*★必須。基準位置の指定*/
margin:50px auto;/*★水平中央位置指定(上下、左右)*/
width:600px;/*★横幅指定。スライド画像の最大横幅よりも大きく*/
height:400px;/*★縦幅指定。スライド画像の最大縦幅よりも大きく*/
border:solid 2px #fff;/*★枠線指定。白色*/
box-shadow:inset 10px 10px 20px #000;/*★内側の影指定。黒色*/
background:#953;/*★スライド画像のサイズが違うので、余白の背景色に濃茶色指定。背景画像を指定しても可。指定しないとbodyと同じ背景になります*/
}
/*★必須。フェードスライド用の指定*/
#Ga1,#Ga2{
position:absolute;/*★#bsを位置の基準にするためと画像２枚を同位置にするため*/
transition:2s ease-in-out;/*★フェード変化時間。1sは１秒*/
top:0;bottom:0;left:0;right:0;margin:auto;/*★画像サイズが違うので画像の上下左右中央位置指定。好みでズラしても可能*/
}

/*★必須。コメント用の指定*/
#Me1,#Me2{
position:absolute;/*★必須。#bsを位置の基準にするため*/
bottom:5px;/*★#bsを基準にした位置指定*/
transition:0.5s ease;/*★必須。最初の0.5sはコメントのフェード変化時間の0.5秒*/
width:100%;/*★#bsの横幅一杯*/
text-align:center;/*★コメントの左右中央位置指定*/
color:#fff;/*★コメントの文字色白色*/
font-size:16px;/*★コメントの文字サイズ*/
}

</style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<div style="text-align:center;"><span style="background:rgba(255,255,255,0.3);color:#000;">●スライド画像の表示見本として、横200px縦298pxの「モナリザ」の画像を入れています●<br>

<span style="color:red;">■画像マウスオンでスライドショーが停止、クリックでリンク先に飛びます■</span></span>
</div>

<!--★コピーここから。下の１行がスライドショー位置指定。id="bs"は必須-->
<div id="bs" title="マウスオンで停止。クリックでリンク先へ"></div>

<script type="text/javascript"><!--
/*-============================================================================================
CSS3+JavaScriptでフェードのスライドショー。サイズ違い実寸表示コメ、リンク追加。
By　http://cya.sakura.ne.jp/java/sshow2.htm (イヌでもわかるJavaScript講座)　★2022/02/15　コメ、リンク追加
==============================================================================================*/
(function (){var n=0, tm; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像等の同時指定。増減可能。['画像','コメント','リンク']; の３個をこの順番で記述。コメントにタグも使用可
var ga= new Array;
ga[n++]=['sf9.jpg','眠る猫',"https://www.youtube.com/watch?v=kd6vakxh5gw"];
ga[n++]=['gat108.jpg','手を舐める猫',"https://www.youtube.com/watch?v=y8p-sAu76OY"];
ga[n++]=['sf6.jpg','遠くを見つめる猫',"https://www.youtube.com/watch?v=2-qstoYAJxY"];
ga[n++]=['pt43.jpg','スコティッシュフィールドの子猫',"https://www.youtube.com/watch?v=aC_Sa0wFQNc"];
ga[n++]=['gy3.jpg','さみしがりやの<span style="color:red;">小さな</span>子猫',"https://www.youtube.com/watch?v=GvFtAuDWA-Q"];
ga[n++]=['pt55.jpg','考える猫',"https://www.youtube.com/watch?v=yLzg6tpHMmY"];
ga[n++]=['Mona.jpg','モナリザ',"http://eigokiji.cocolog-nifty.com/blog/"];

var myurl='';       //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
var spd=5000;　     //★画像切替時間 1000=1秒 スライド速度。CSS指定のフェード変化時間より長くする
var tgt="_new";     //★リンクのtarget指定。「_top」「_new」等。ブラウザによって、リンク先から戻った時の動作が違う

//指定ここまで----------------------------------------------------------------------------------
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=-1;		          //現在表示している配列番号
var myflg=0;		          //どっちを表示して、どっちを消すかのフラグ
function myChange(){              /*スライドショーメイン関数*/
i= (i<len-1) ? i+1 : 0;　　       //次の配列番号
myflg=(myflg==0) ? 1 : 0;         //表示・非表示フラグ反転
if (myflg==0){
$("Ga1").src=myurl+ga[i][0]; $("Me1").innerHTML=ga[i][1];
$("Lk1").href=ga[i][2]; $("Lk2").href=ga[i][2];//リンクは２個とも指定
//次の画像、コメ、リンクをセット。フェードイン。フェードアウト
$("Ga1").style.opacity=1; $("Ga2").style.opacity=0; $("Me1").style.opacity=1; $("Me2").style.opacity=0;}
else{
$("Ga2").src=myurl+ga[i][0]; $("Me2").innerHTML=ga[i][1];
$("Lk2").href=ga[i][2]; $("Lk1").href=ga[i][2];//リンクは２個とも指定
//次の画像、コメ、リンクをセット。フェードアウト。フェードイン
$("Ga1").style.opacity=0; $("Ga2").style.opacity=1; $("Me1").style.opacity=0; $("Me2").style.opacity=1;}
tm=setTimeout(myChange,spd);    //指定速度周期に画像を更新する
}	
var sss='<a href="" id="Lk1" target="+tgt+"><img src="" id="Ga1"></a>';
sss+='<a href="" id="Lk2" target="+tgt+"><img src="" id="Ga2"></a>';
sss+='<div id="Me1">　</div><div id="Me2">　</div>';
$("bs").innerHTML=sss;
$("Ga1").onmouseout=myChange; $("Ga1").onmouseover=function (){clearTimeout(tm);}
$("Ga2").onmouseout=myChange; $("Ga2").onmouseover=function (){clearTimeout(tm);}
myChange();
}());//即時関数終了

// --></script>
<!--★コピーここまで-->

</body>
</html>
フェード８-２■フェードでサイズ違い実寸表示コメ、リンク付き UP日時 : 2022/02/15

　フェード８-２■フェードでサイズ違い実寸表示コメ、リンク付き　　　　UP日時 : 2022/02/15
