DIVCSS布局實例：一款漂亮的圖片切換效果(可以控制播放)_DIV+CSS實例
      
編輯Tag賺U幣
      


      教程Tag：暫無Tag,歡迎添加,賺取U幣!
      


      


      　　這是一款圖片切換效果，主要是應(yīng)用DIV CSS進(jìn)行布局，以javascript作為腳本來實現(xiàn)這樣的效果。
      　　請您非凡注重，本例效果在FF下無效。
      　　最終效果如圖：

      

      

      　　我們來看HTML代碼：

      

      

       示例代碼 [www.wf0088.com]
      

      <div id="mContainer"></div>
      <input class="btn" id="pauseBtn" onclick="doPause();" type="button" value="pause" /> 
      

      

      　　建立一個層，設(shè)置id為mContainer，作為圖片的容器層。
      　　設(shè)置一個按鈕來控制圖片切換的暫停與繼續(xù)。

      　　我們看下面的CSS代碼：

      

      

       示例代碼 [www.wf0088.com]
      

      #mContainer {
      width:225px; 
      position:relative; 
      height:168px;;
      }
      .mPhoto {
      filter:Alpha(opacity=0); 
      left:0px; 
      position:absolute; 
      top:0px; 
      moz-opacity:0.0;
      }
      .btn {
      border-right:#000 1px solid; 
      border-top:#000 1px solid; 
      margin-top:5px; 
      font-size:9px; 
      border-left:#000 1px solid; 
      width:40px; 
      border-bottom:#000 1px solid; 
      font-family:verdana;
      }
      

      

      　　這些代碼我們都能看明白，需要指出的是類mPhoto的樣式定義。
      　　主要是應(yīng)用了濾鏡將圖片的透明度設(shè)置為零，完全透明。

      我們看下面的javascript腳本：

      

      

       示例代碼 [www.wf0088.com]
      

      var currentPhoto = 0;
      var secondPhoto = 1;

      var currentOpacity = new Array();
      var imageArray = new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg");

      var FADE_STEP = 2;
      var FADE_INTERVAL = 10;
      var pause = false;

      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=\"" _fcksavedurl="\""" 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 = "pause";
      } else {
      pause = true;
      document.getElementById("pauseBtn").value = "play";
      }
      }
      

      


      

      



      


      來源：無憂整理//所屬分類：DIV+CSS實例/更新時間：2007-10-22


      

      



      


      



      相關(guān)DIV+CSS實例：