使用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创建幻灯片放映

回答

相关问题