使用 HTML 和 CSS 编写幻灯片
通常，开发人员使用 JavaScript 将行为添加到 HTML 代码中。有时，我们也可以使用 CSS 将行为添加到 HTML 代码中。例如，我们可以使用 HTML 和 CSS 创建幻灯片，而不是将 JavaScript 与 HTML 一起使用。
我们可以创建自定义关键帧来为幻灯片添加动画效果并创建幻灯片。
语法
用户可以按照以下语法仅使用 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 添加了动画。
在幻灯片关键帧中，我们更改 CSS 属性"margin-left"的值来更改幻灯片。
步骤
步骤 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 属性的值以更改幻灯片。此外，由于我们有 4 张幻灯片，因此我们在 20 的间隙内细分了百分比。
示例
在下面的示例中，我们创建了 4 张不同的幻灯片并添加了文本内容。此外，我们使用了"第 n 个子项"伪选择器来选择第 n 张幻灯片并更改其字体大小和文本颜色。
<html>
<head>
<style>
/* 设置幻灯片的框 */
.parent { height: 300px; width: 600px; overflow: hidden;}
/* 设置幻灯片元素的高度和宽度 */
.element {float: left; height: 500px; width: 716px; backgroundcolor: grey;}
/* 设置幻灯片 div 和动画的宽度。 */
.slides { width: calc(716px * 4); animation: slideShow 10s ease infinite;}
/* 更改每张幻灯片的字体大小和文本颜色 */
.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;}
/* 为幻灯片创建动画 */
/* 如需更多幻灯片，用户可以相应地选择百分比。*/
@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 秒的幻灯片。
在下面的示例中，我们将图片添加为幻灯片的内容。此外，我们将图片尺寸设置为"元素"div的完整尺寸。
<html>
<head>
<style>
/* 设置幻灯片的框 */
.parent { height: 300px; width: 600px; overflow: hidden;}
/* 设置幻灯片元素的高度和宽度 */
.element {float: left; height: 500px; width: 716px; backgroundcolor: grey; }
/* 设置幻灯片 div 和动画的宽度。 */
.slides {width: calc(716px * 4); animation: slideShow 10s ease infinite;}
img {width: 100%; height: 100%;}
/* 创建幻灯片的动画 */
/* 如需更多幻灯片，用户可以相应地设置百分比。 */
@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 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
