Javascript幻燈片效果

我回來了，出現問題=）爲了讓我自己知道幻燈片演示的代碼，我用方框替換了圖像，我希望他們每個人用一個接一個地「激活」秒間隔。我根本不知道代碼有什麼問題。Javascript幻燈片效果

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>MiniAnimation</title> 

     <script type="text/javascript"> 

      window.addEventListener("load",onLoadWindow); 

      var active_slide; 
      var slides; 

      function onLoadWindow(e) { 
       var slideShow=document.getElementById("boxofBoxes"); 
       slides=slideShow.getElementsByTagName("div"); 
       active_slide=0; 

       slides[0].classList.add("active"); 

       setInterval(nextSlide,1000); 
      } 



      function nextSlide() { 
       slides[active_slide].classList.remove("active"); 
       active_slide++; 

       active_slide%=5; 

       slides[active_slide].classList.add("active"); 
      } 

     </script> 

     <style type="text/css"> 

      body { 
       background-color:lightblue; 
      } 

      .active { 
       opacity:1; 
       transition:opacity 1s; 
      } 

      .box { 
       display:block; 
       float:left; 
       width:25px; 
       height:25px; 
       background-color:white; 
       margin-left:63px; 
       opacity:0; 
      } 

      #boxofBoxes { 
       width:503px; 
      } 

     </style> 

    </head> 

    <body> 
     <div id="boxofBoxes"> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
      <div class="box"></div> 
     </div> 
    </body> 

</html>

再次感謝您的幫助！ =）

來源

2013-04-01 Kizer Yakuza

由於您的CSS寫入的順序，opacity: 0;覆蓋了opacity: 1;。嘗試像這樣：

.box { 
    display:block; 
    float:left; 
    width:25px; 
    height:25px; 
    background-color:white; 
    margin-left:63px; 
    opacity:0; 
    transition: opacity 1s; 
} 

.active { 
    opacity: 1;  
}

你必須弄清楚不透明度轉換和定位你自己，但希望這有助於！

這裏有一個的jsfiddle一起玩：http://jsfiddle.net/sJNvw/

來源

2013-04-01 01:28:57 metadept

是的感謝！雖然和原始代碼一樣，我仍然在.active中進行轉換，正如您所指出的那樣，它只是在.box樣式定義下翻轉它。我受到（錯誤的）印象，無論什麼被稱爲最後的東西都會超過最初設定的任何東西。很高興知道css stylings的順序很重要^^ –

Javascript幻燈片效果

回答

相關問題