使用 HTML 和 CSS 编写幻灯片

幻灯片可用于显示从一张幻灯片连续滚动到另一张以显示其内容的文本或图像。本文展示了一种仅使用HTML和CSS构建幻灯片的方法。由于不涉及 JavaScript，它消耗更少的浏览器内存并占用更少的计算能力。基于 JavaScript 的滑块会使网页变慢，并且如果用户在浏览器中禁用了 JavaScript，则它也不起作用。

它使用动画关键帧的方法通过在动画期间修改每个幻灯片的 margin-left 属性来滚动每个幻灯片。可以指定动画类型，以便可以根据所需的持续时间和效果对幻灯片进行动画处理。在本文中，我们将任务分为两部分，第一部分我们将仅使用 HTML 装饰结构，第二部分我们将使用 CSS 装饰结构。

第一部分：此部分包含页面的 HTML 部分。必须显示的幻灯片使用相应的文本进行定义。

• HTML代码：

  HTML

  
  
    
  
  
    
    
    
  
      
  
    
        
        
  
          
  
            GeeksforGeeks
          
        
        
  
          
  
            A computer science portal
          
        
        
  
          
  
            This is an example of
          
        
        
  
          
  
            Slideshow with HTML and CSS only
          
        
      
    
  
  

第二部分：此部分包含用于制作幻灯片的所有样式。用于移动每张幻灯片的动画是通过根据每张幻灯片的需要设置 margin-left 属性来定义的。这使它看起来在每张幻灯片之间平滑过渡。

• CSS 代码：

  CSS

  body {
    font-family: Helvetica, sans-serif;
    padding: 5%;
    text-align: center;
    font-size: 50;
  }
    
  /* Styling the area of the slides */
  #slideshow {
    overflow: hidden;
    height: 510px;
    width: 728px;
    margin: 0 auto;
  }
    
  /* Style each of the sides 
  with a fixed width and height */
  .slide {
    float: left;
    height: 510px;
    width: 728px;
  }
    
  /* Add animation to the slides */
  .slide-wrapper {
    /* Calculate the total width on the
    basis of number of slides */
    width: calc(728px * 4);
    
    /* Specify the animation with the
    duration and speed */
    animation: slide 10s ease infinite;
  }
    
  /* Set the background color
  of each of the slides */
  .slide:nth-child(1) {
    background: green;
  }
    
  .slide:nth-child(2) {
    background: pink;
  }
    
  .slide:nth-child(3) {
    background: red;
  }
    
  .slide:nth-child(4) {
    background: yellow;
  }
    
  /* Define the animation 
  for the slideshow */
  @keyframes slide {
    /* Calculate the margin-left for 
    each of the slides */
    20% {
      margin-left: 0px;
    }
    
    40% {
      margin-left: calc(-728px * 1);
    }
    
    60% {
      margin-left: calc(-728px * 2);
    }
    
    80% {
      margin-left: calc(-728px * 3);
    }
  }
  

完整代码：这里我们将以上两部分合二为一来完成上述任务。

HTML

  
  


  
  
  

    

  
      
      

        

          GeeksforGeeks
        
      
      

        

          A computer science portal
        
      
      

        

          This is an example of
        
      
      

        

          Slideshow with HTML and CSS only
        
      
    
  

输出：