用HTML和CSS编程幻灯片

通常，开发者使用JavaScript为HTML代码添加行为。有时候，我们也可以使用CSS为HTML代码添加行为。例如，我们可以使用HTML和CSS而不是使用JavaScript来创建幻灯片。

我们可以创建自定义的关键帧来为幻灯片添加动画并创建一个幻灯片。

语法

用户可以按照以下语法使用仅使用HTML和CSS创建幻灯片。

.slides {
   width: calc(716px * 2);
   animation: slideShow 10s ease infinite;
}
@keyframes slideShow {
   30% {margin-left: 0px;}
   70% {margin-left: calc(-716px * 1);}
}

在上面的语法中，’slides’ div包含多个幻灯片。我们根据它包含的幻灯片总数定义了’slides’ div的宽度。此外，我们还为幻灯片div添加了动画。在幻灯片播放动画中，我们改变了’margin-left’ CSS属性的值来改变幻灯片。

步骤

步骤1 – 创建一个div元素并给它一个’parent’类名。

步骤2 – 创建一个嵌套的div元素并给它一个’slides’类名。此外，创建多个嵌套的div元素，它们的类名为’element’，代表着幻灯片。

步骤3 – 此外，将幻灯片的内容添加到类名为’element’的div元素中。

步骤4 – 现在，我们需要为幻灯片添加CSS代码。为’parent’ div元素设置固定的宽度和高度。

步骤5 – 为’element’ div设置固定的宽度和高度，这是我们的幻灯片。

步骤6 – 对于’slides’ div，根据包含的幻灯片总数计算总宽度，并为特定的持续时间添加’slideshow’动画。

步骤7 – 创建一个’slideshow’关键帧，应该通过改变’margin-left’ CSS属性的值来改变幻灯片。另外，我们将百分比分解为20的间隔，因为我们有4个幻灯片。

示例1

在下面的示例中，我们创建了4个不同的幻灯片并添加了文本内容。此外，我们使用了’n-th child’伪选择器来选择第n个幻灯片并更改其字号和文本颜色。

<html>
<head>
   <style>
      /* set the box for the slides */
      .parent { height: 300px; width: 600px; overflow: hidden;}
      /* set height and width for slide elements */
      .element {float: left; height: 500px; width: 716px; backgroundcolor: grey;}
      /* set the width of the slides div and animation. */
      .slides { width: calc(716px * 4); animation: slideShow 10s ease infinite;}
      /* changing the font size and text color for every slide */
      .element:nth-child(1) {font-size: 2rem; color: blue;}
      .element:nth-child(2) {font-size: 3rem; color: black;}
      .element:nth-child(3) {font-size: 4rem; color: green;}
      .element:nth-child(4) {font-size: 5rem; color: pink;}
      /* creating the animation for the slideShow */
      /* for more slides, users can take percentages accordingly. */
      @keyframes slideShow {
         20% {margin-left: 0px;}
         40% {margin-left: calc(-716px * 1);}
         60% {margin-left: calc(-716px * 2);}
         80% {margin-left: calc(-716px * 3);}
      }
   </style>
</head>
<body>
   <h2> Programming a slideshow using the <i> HTML and CSS </i> only </h2>
   <div class = "parent">
      <div class = "slides">
         <div class = "element">
            <h3 class = "content"> This is a slide 1. </h3>
         </div>
         <div class = "element">
            <h3 class = "content"> This is a slide 2. </h3>
         </div>
         <div class = "element">
            <h3 class = "content"> This is a slide 3. </h3>
         </div>
         <div class = "element">
            <h3 class = "content"> This is a slide 4. </h3>
         </div>
      </div>
   </div>
</body>
</html>

输出

在输出中，用户可以看到10秒钟的幻灯片。

示例2

在下面的示例中，我们将图像添加为幻灯片的内容。此外，我们将图像的尺寸设置为“element” div的完整尺寸。

<html>
<head>
   <style>
      /* set the box for the slides */
      .parent { height: 300px; width: 600px; overflow: hidden;}
      /* set height and width for slide elements */
      .element {float: left; height: 500px; width: 716px; backgroundcolor: grey; }
      /* set the width of the slides div and animation. */
      .slides {width: calc(716px * 4); animation: slideShow 10s ease infinite;}
      img {width: 100%; height: 100%;}
      /* creating the animation for the slideshow */
      /* for more slides, users can take percentages accordingly. */
      @keyframes slideShow {
         20% {margin-left: 0px;}
         40% {margin-left: calc(-716px * 1);}
         60% {margin-left: calc(-716px * 2);}
         80% {margin-left: calc(-716px * 3);}
      }
   </style>
</head>
<body>
   <h2> Programming a slideshow using the <i> HTML and CSS </i> only </h2>
   <div class = "parent">
      <div class = "slides">
         <div class = "element">
            <img src = "https://www.stockvault.net/data/2011/05/31/124348/thumb16.jpg" alt = "image 1">
         </div>
         <div class = "element">
            <img src = "https://www.stockvault.net/data/2007/03/01/99589/thumb16.jpg" alt = "image 2">
         </div>
         <div class = "element">
            <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTxtApKDB3clf0BZYxgUlbGiYg7m-DwYlzYd9WXS5u3_K2MjeMZ-Yj3GpWdaNaGYej52l8&usqp=CAU"  alt = "image 3">
         </div>
         <div class = "element">
            <img src = "https://thumbs.dreamstime.com/b/mani%C3%A8re-par-les-racines-vertes-de-h%C3%AAtre-de-for%C3%AAt-arbres-en-nature-41019730.jpg" alt = "image 4">
         </div>
      </div>
   </div>
</body>
</html>