フェード４■フェードでコメ付オン停止

<!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>フェード４■フェードでコメ付オン停止</title>

<!--★コピーここから-->
<style type="text/css"><!--
/*★必須。スライド画像の位置指定と、枠(paddingやborder)などの装飾。位置指定は必ずposition:●●(何でも使いやすい指定で);が必要*/
#bs{
position:relative;
margin:0px auto 50px;/*★水平中央位置指定(上、左右、下)*/
width:370px;/*★スライド画像の横幅*/
height:245px;/*★スライド画像の縦幅*/
/*以下の指定は変更可能*/
border-radius: 25px 0px;/*★左上と右下の角丸指定*/
border:5px solid orange;/*★枠線　オレンジ*/
padding:40px;/*★余白指定*/
}

/*★必須。フェード画像用の指定*/
#Ga1,#Ga2{
position:absolute;/*★必須。#bsを位置の基準にするためと画像２枚を同位置にするため*/
transition:1s ease-in-out;/*★フェード変化時間。1sは１秒*/
}

/*★必須。コメント用の指定*/
#Me1,#Me2{
position:absolute;/*★必須。#bsを位置の基準にするため*/
bottom:10px;
transition:0.5s ease;/*★必須。最初の0.5sはコメントのフェード変化時間の0.5秒*/
}
--></style>
<!--★コピーここまで。bodyの中にもコピーがあります-->

</head>
<body>

<p style="margin-top:50px;width:100%; text-align:center;">■画像マウスオンで、スライドショーが停止します■</p>

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

<script type="text/javascript"><!--
/*-============================================================================================
CSS3+JavaScriptでフェードのスライドショーにコメント付き、画像マウスオンで停止を追加　★2016/01/21　グローバル変数を削除
By　http://www.red.oit-net.jp/tatsuya/java/sshow2.htm (イヌでもわかるJavaScript講座)
==============================================================================================*/
(function (){var n=0,tm; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★画像とコメントの同時指定。増減可能。['画像','コメント'];　の２個をこの順番で記述。コメントにタグも使用可能
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 spd=4000;　      //★画像切替時間 1000=1秒 スライド速度。CSS指定のフェード変化時間より長くする

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]; 
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];
Ga1.style.opacity=0; Ga2.style.opacity=1; Me1.style.opacity=0; Me2.style.opacity=1;} //次をセット。フェードアウト。フェードイン
tm=setTimeout(myChange,spd);    //指定速度周期に画像を更新する
}	
var sss='<img src="" id="Ga1"><img src="" id="Ga2">';
sss+='<div id="Me1">　</div><div id="Me2">　</div>';
document.getElementById('bs').innerHTML=sss;
Ga1.onmouseout=myChange; Ga1.onmouseover=function (){clearTimeout(tm);}
Ga2.onmouseout=myChange; Ga2.onmouseover=function (){clearTimeout(tm);}
myChange();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>
フェード４■フェードでコメ付オン停止 最終修正日 : 2016/01/21

　フェード４■フェードでコメ付オン停止　　　　最終修正日 : 2016/01/21
