Question

我是网络开发的新手，我正在尝试使用JavaScript和HTML创建幻灯片。我一直遇到的问题是，当我第一次加载我的页面时，所有幻灯片放映文本重叠，之后幻灯片按预期运行。

＆＃13;

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);

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

将第一个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秒后第一次调用该函数。所以你应该先手动调用它。

使用Javascript和HTML创建幻灯片放映

1 个答案: