使用HTML和CSS编写幻灯片展示-html教程-PHP中文网

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

WBOY

发布： 2023-08-19 20:25:12

转载

1738人浏览过

使用html和css编写幻灯片展示

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">
            @@##@@
         </div>
         <div class = "element">
            @@##@@
         </div>
         <div class = "element">
            @@##@@
         </div>
         <div class = "element">
            @@##@@
         </div>
      </div>
   </div>
</body>
</html>

登录后复制

在输出中，用户可以观察图像的幻灯片播放。

结论

用户学会了仅使用HTML和CSS创建幻灯片。然而，建议使用JavaScript来创建幻灯片，因为我们可以更灵活地操作它。例如，如果我们有100多个幻灯片并且需要创建幻灯片播放，CSS代码可能会变得更复杂，因为我们需要在关键帧中添加硬编码的百分比值来实现幻灯片的动画效果。