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

WBOY 转载: 2023-08-19 20:25:12 614浏览

使用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">
            <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>

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

结论

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

以上就是使用HTML和CSS编写幻灯片展示的详细内容，更多请关注php中文网其它相关文章！

CSS html 幻灯片展示 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除

上一条：Materialize CSS中的面包屑有哪些类别？下一条：如何返回一个表示等效日期对象源的字符串？