使用Javascript和HTML創建幻燈片放映

我對web開發非常陌生，並且正在嘗試使用JavaScript和HTML創建幻燈片放映。我不斷遇到的問題是，當我第一次加載我的頁面時，所有幻燈片放映文本重疊，幻燈片放映按預期運行。使用Javascript和HTML創建幻燈片放映

var current = 0; 
 
var slides = document.getElementsByClassName("slide"); 
 

 
setInterval(function() { 
 
    
 
    for (var i = 0; i < slides.length; i++) { 
 
    slides[i].style.opacity = 0; 
 
     
 
    } 
 
    slides[current].style.opacity = 1; 
 
    current = (current != slides.length - 1) ? current + 1 : 0;  
 
    
 
}, 2500);

.logo{ 
 
    width:100px; 
 
    margin-left: 850px; 
 
    margin-top: -90px; 
 
    vertical-align:top;   
 
} 
 

 

 
.show { 
 
    position: absolute;width:500px; height:200px; left:50%; top:50%; margin-top: -140px;margin-left: -250px; 
 
    transition: opacity .5s ease-in; 
 
} 
 

 
.descrip { 
 
    text-align: center; 
 
    display: block; 
 
    position: absolute;width:500px; left:50%; top:50%; margin-top: 100px;margin-left: -250px; 
 
    transition: opacity .5s ease-in; 
 
} 
 

 

 

 
h1{ 
 
    text-align: center; 
 
    margin-top: 130px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Tourism Slide Show</title> 
 
    <link href = "travelPics.css" rel = "stylesheet" type = "text/css"> 
 
    <script type="text/javascript" src ="travelSlideShow.js"></script> 
 
    </head> 
 

 
    <body > 
 
     <h1>Uncle Phil's Tourism</h1> 
 
     <img src ='images/logo.jpg' class = "logo" alt = "logo"> 
 
     
 
     <div class = "slide" > 
 
<img src="images/athens.jpg" alt="Athens" class="show" > 
 
     <h2 class = "descrip"> 
 
     Acropolis of Athens in Athens Greece <br> 
 
     The ruins of a 5th-century B.C temple.  
 
     </h2> 
 
      </div> 
 
      
 
      <div class = "slide"> 
 
<img src="images/burjkhalifa.jpg" alt="Burj Khalifa" class="show"> 
 
     <h2 class = "descrip">The tallest structure in the world, standing at 829.8 m<br>Located in Dubai, United Arab Emirates</h2> 
 
     </div> 
 
       
 
     <div class = "slide"> 
 
<img src="images/cappadocia.jpg" alt="Cappadocia" class="show"> 
 
     <h2 class = "descrip"> 
 
     Located in central Turkey, is known for the Bronze Age homes carved into valley walls 
 
     </h2> 
 
       
 
       </div> 
 
     
 
     <div class = "slide"> 
 
<img src ="images/florence.jpg" alt ="Florence" class="show"> 
 
     <h2 class = "descrip"> 
 
     The Cathedral of Santa Maria del Fiore and Piazza Duomo <br> 
 
      Contains art and architecture by the greatest artists of the Italian Renaissance -- Ghiberti, Brunelleschi, Donatello, Giotto, and Michelangelo. 
 
     </h2> 
 
      </div> 
 
     
 
     <div class = "slide"> 
 
<img src = "images/lighthouse.jpg" alt ="Lighthouse" class="show"> 
 
     <h2 class = "descrip"> Light house </h2> 
 
      </div> 
 
     
 
     <div class = "slide"> 
 
      
 
<img src = "images/louvre.jpg" alt = "Louvre" class="show"> 
 
     <h2 class = "descrip"> Louvre</h2> 
 
      </div> 
 
      
 
     <div class = "slide"> 
 
<img src = "images/victoriafalls.jpg" alt = "Victoria Falls" class="show"> 
 
     <h2 class = "descrip">Victoria falls </h2> 
 
      
 
      </div> 
 
     
 
     <div class = "slide"> 
 
<img src = "images/warmuseum.jpg" alt = "Canadian War Museum" class="show"> 
 
     <h2 class = "descrip"> War Museum</h2> 
 
     </div> 
 
     
 
     
 
     </body> 
 
    
 
    
 
    </html>

來源

2017-02-24 struggling

在運行代碼之前，您需要等待頁面加載。用'window.onload = function（）{...};'包裝你的代碼。 –

我應該包裝整個HTML代碼還是簡單的部分？ – struggling

只是JavaScript。 –

變換第一部分JS爲以下：

//And manually call update once or at initial loading 
//E.g. in jquery: $(document).on("load", update); 
update(); 

setInterval(update, 2500); 

function update() 
{ 
     for (var i = 0; i < slides.length; i++) { 
     slides[i].style.opacity = 0; 

     } 
     slides[current].style.opacity = 1; 
     current = (current != slides.length - 1) ? current + 1 : 0; 
}

這樣做的原因是，setInterval的將調用函數2.5秒之後的很第一次。所以你最初應該手動調用它。

來源

2017-02-24 21:51:37 user3691763

在我的HTML中，我添加了，並在JavaScript中添加了上面提到的內容。但是現在，當我第一次打開頁面時，它顯示了在幻燈片放映開始之前所有文本重疊僅僅一秒的屏幕，這只是頁面加載的一部分？或者我犯了一個錯誤？ – struggling

不，這不是一個錯誤。當所有事情完成時，都會觸發負載。因此，直到加載所有元素，文本將重疊。你可以在包含所有元素的容器的css中將不透明度設置爲0，然後向其添加css不透明度轉換（css3generator.com）。在你的update（）方法中，你可以在開始時添加'document.getElementById（「container-id」）。style.opacity = 1;'，這會讓它看不見，然後在加載完所有東西后慢慢淡入。通過使用不透明度而不是顯示：您不會在加載時跳過內容。 – user3691763

工作完美！謝謝！ – struggling

使用Javascript和HTML創建幻燈片放映

回答

相關問題