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

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

WBOY

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

转载

1889人浏览过

使用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’.

追梦flash企业网站管理模板A系列11.0

追梦A系列（11.0版本，以下11.0均简称为A）是针对企业网站定制设计的，模板采用全新AS3.0代码编辑，拥有更快的运行和加载速度，A系列模板主要针对图片展示，拥有简洁大气展示效果，并且可以自由扩展图片分类，同时还拥有三个独立页面介绍栏目，一个新闻栏目，一个服务介绍栏目，一个幻灯片展示和flv视频播放栏目。A系列模板对一些加载效果进行了修改，包括背景的拉伸模式以及标题的展示方式等都进行了调整，同

查看详情

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中文网其它相关文章！