▼クロスフェードしながら切り替わる画像スライドショーです。左下のボタンで再生・一時停止をコントロールできます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Image Cross Fader v1.0.1の設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script type="text/javascript">
var currentPhoto = 0;
var secondPhoto = 1;
var currentOpacity = new Array();
/* スライドショーに表示する画像のURLを配列に格納 */
var imageArray = new Array(
"http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9.jpg",
"http://farm4.static.flickr.com/3089/3143248598_018daa38eb.jpg",
"http://farm4.static.flickr.com/3244/3142386073_87c62671a5.jpg",
"http://farm4.static.flickr.com/3113/3142386067_fc176636eb.jpg"
);
var FADE_STEP = 2;
var FADE_INTERVAL = 10;
var pause = false; /* スライドショーを一時停止した状態で表示する場合は「true」を指定 */
/* ページロード時にスライドショー生成 */
function init() {
currentOpacity[0]=99;
for(i=1;i<imageArray.length;i++)currentOpacity[i]=0;
mHTML="";
for(i=0;i<imageArray.length;i++)mHTML+="<div id=\"photo\" name=\"photo\" class=\"mPhoto\"><img src=\"" + imageArray[i] +"\"></div>";
document.getElementById("mContainer").innerHTML = mHTML;
if(document.all) {
document.getElementsByName("photo")[currentPhoto].style.filter="alpha(opacity=100)";
} else {
document.getElementsByName("photo")[currentPhoto].style.MozOpacity = .99;
}
mInterval = setInterval("crossFade()",FADE_INTERVAL);
}
/* クロスフェード */
function crossFade() {
if(pause)return;
currentOpacity[currentPhoto]-=FADE_STEP;
currentOpacity[secondPhoto] += FADE_STEP;
if(document.all) {
document.getElementsByName("photo")[currentPhoto].style.filter = "alpha(opacity=" + currentOpacity[currentPhoto] + ")";
document.getElementsByName("photo")[secondPhoto].style.filter = "alpha(opacity=" + currentOpacity[secondPhoto] + ")";
} else {
document.getElementsByName("photo")[currentPhoto].style.MozOpacity = currentOpacity[currentPhoto]/100;
document.getElementsByName("photo")[secondPhoto].style.MozOpacity =currentOpacity[secondPhoto]/100;
}
if(currentOpacity[secondPhoto]/100>=.98) {
currentPhoto = secondPhoto;
secondPhoto++;
if(secondPhoto == imageArray.length)secondPhoto=0;
pause = true;
xInterval = setTimeout("pause=false",2000);
}
}
/* 一時停止 */
function doPause() {
if(pause) {
pause = false;
document.getElementById("pauseBtn").value = "一時停止";
} else {
pause = true;
document.getElementById("pauseBtn").value = "再生";
}
}
window.onload=init;
</script>
<!-- CSS -->
<style type="text/css">
#mContainer {
margin:0 0 1em 0; padding:0;
position:relative;
width:500px; height:375px;
}
.mPhoto {
position:absolute;
top:0px; left:0px;
-moz-opacity:0.0;
filter:Alpha(opacity=0);
}
.btn {
border-style:solid;
border-width:1px;
border-color:#000000;
font-family:verdana;
font-size:9px;
width:6em;
float:left;
}
#photoCredits {
width:500px;
font-family:verdana;
font-size:9px;
text-align:right;
}
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1><a href='http://slayeroffice.com/code/imageCrossFade/'>Image Cross Fader v1.0.1</a> | 設置サンプル</h1>
<p>▼クロスフェードしながら切り替わる画像スライドショーです。左下のボタンで再生・一時停止をコントロールできます。</p>
<!-- CODE -->
<div id="mContainer"></div>
<div class="cf">
<input type="button" value="一時停止" id="pauseBtn" onclick="doPause();" class="btn">
<div id="photoCredits">photos © PHP & JavaScript Room</div>
</div>
<!-- / CODE -->
</div>
</body>
</html>
