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编写幻灯片展示的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 使用HTML和CSS编写幻灯片展示
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
