▼クロスフェードしながら切り替わる画像スライドショーです。左下のボタンで再生・一時停止をコントロールできます。
<!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>