PHP & JavaScript Room :: 設置サンプル

実行結果

Image Cross Fader v1.0.1 | 設置サンプル

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

photos © PHP & JavaScript Room

設置サンプルのソース

<!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 &amp; 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 &copy; PHP & JavaScript Room</div>
         </div>
<!-- / CODE -->
      </div>
   </body>
</html>