<style type="text/css">
.fadeout{
opacity: 0;
transition: 3s ease-in-out;
-webkit-transition: 3s ease-in-out;
}
.fadein{
opacity: 1;
transition: 3s ease-in-out;
-webkit-transition: 3s ease-in-out;
}
</style>
<script type="text/javascript"><!--
myImage = new Array(
// 画像ファイル名の設定
"IMG_088.gif",
// 鯉
"IMG_0141.gif",
// 滝
"IMG_0400.gif",
// 石仏
"IMG_0667.gif",
// 橋
"IMG_0679.gif"
// 山
);
myNowCnt = -1;
// 現在表示している配列番号
myflg = 0;
// どっちを表示して、どっちを消すかのフラグ
function myChange(){
// スライドショーメイン関数
myNowCnt = (myNowCnt<myImage.length-1) ? myNowCnt+1 : 0;
// 次の配列番号
myflg = (myflg==0) ? 1 : 0;
// 表示・非表示フラグ反転
if (myflg == 0){
document.getElementById("idshow1").src = myImage[myNowCnt];
// 次の画像をセットする
document.getElementById("idshow1").className = "fadein";
// フェードイン
document.getElementById("idshow2").className = "fadeout";
// フェードアウト
}else{
document.getElementById("idshow2").src = myImage[myNowCnt];
// 次の画像をセットする
document.getElementById("idshow1").className = "fadeout";
// フェードアウト
document.getElementById("idshow2").className = "fadein";
// フェードイン
}
setTimeout( "myChange()" , 4000 ); // 4秒周期に画像を更新する
}
// --></script>
<div style="border-style:ridge; border-width:8px; border-radius:10px; box-shadow:10px 10px 10px rgba(0,0,0,0.5); border-color:#800000; width:320px;">
<img id="idshow1" class="fadeout" style="position:absolute;" src="IMG_088.gif" width="320" height="240">
<img id="idshow2" class="fadein" src="IMG_0141.gif" width="320" height="240">
</div>
<script type="text/javascript"><!--
myChange();
// --></script>
