首页　>　文章列表　>　使用HTML和CSS编写幻灯片展示

使用HTML和CSS编写幻灯片展示

css HTML 幻灯片展示
339 2023-09-18

Generally, the developer uses JavaScript to add the behaviour to the HTML code. Sometimes, we can also add behaviour to the HTML code using CSS. For example, we can create a slideshow using HTML and CSS rather than using JavaScript with HTML.

We can create custom keyframes to animate the slides and create a slideshow.

语法

用户可以按照以下语法，仅使用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 包含的幻灯片总数定义了 'slides' div 的宽度。此外，我们还为幻灯片 div 添加了动画。

In the slideshow keyframes, we change the value of the ‘margin-left’ CSS property to change the slide.

步骤

步骤1 - 创建一个div元素，并给它一个'parent'类名。

Step 2 – Create a nested div element and give the ‘slides’ class name. Furthermore, create multiple nested div elements with the ‘element’ class name representing the slides.

Step 3 – Also, add the content of the slide to the div element with the class name ‘element’.

Step 4 – Now, we require to add the CSS code for the slideshow. Give the fixed width and height to the ‘parent’ div element.

Step 5 – Set the fixed width and height for the ‘element’ div, which is our slide.

Step 6 – For the ‘slides’ div, calculate the total width according to the total number of slides it contains, and add a ‘slideshow’ animation for a particular duration.

Step 7 – Create a ‘slideshow’ keyframe which should change the value of the ‘margin-left’ CSS property to change the slides. Also, we have breakdown the percentage in the gap of 20, as we have 4 slides.

Example

在下面的示例中，我们创建了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>

In the output, users can see the slideshow of 10 seconds.
Example

在下面的示例中，我们将图像添加为幻灯片的内容。此外，我们将图像的尺寸设置为“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>