HTML - Web 幻灯片台

幻灯片是演示文稿的单页。统称为幻灯片组。

例子

让我们看一下下面的示例，我们将在其中创建一个 HTML Web 幻灯片台


<!DOCTYPE html>
<html>
	 <style>
			body {
				 font-family: verdana;
				 background-color: #F4ECF7;
				 color: #DE3163;
			}

			.x {
				 display: none;
				 text-align: center;
				 padding: 123px;
			}

			.x.active {
				 display: block;
			}

			.prev,
			.next {
				 position: absolute;
				 top: 40%;
				 background-color: #EAFAF1;
				 color: #DE3163;
				 padding: 10px 20px;
				 cursor: pointer;
				 border: none;
				 transition: background-color 0.2s;
			}

			.prev:hover,
			.next:hover {
				 background-color: #DFFF00;
			}

			.prev {
				 left: 10px;
			}

			.next {
				 right: 10px;
			}
	 </style>
<body>
	 <div class="x active">
			<h1>SLIDE 1</h1>
			<p>HELLO</p>
	 </div>
	 <div class="x">
			<h1>SLIDE 2</h1>
			<p>WELCOME</p>
	 </div>
	 <div class="x">
			<h1>SLIDE 3</h1>
			<p>THANK YOU.!</p>
	 </div>
	 <button class="prev" onclick="prevSlide()">Previous</button>
	 <button class="next" onclick="nextSlide()">Next</button>
	 <script>
			let a = 0;
			const slides = document.querySelectorAll('.x');

			function showSlide(n) {
				 slides[a].classList.remove('active');
				 a = (n + slides.length) % slides.length;
				 slides[a].classList.add('active');
			}

			function prevSlide() {
				 showSlide(a - 1);
			}

			function nextSlide() {
				 showSlide(a + 1);
			}
			showSlide(a);
	 </script>
</body>
</html>

当我们运行上述代码时，它将生成一个由按钮组成的输出以及包含网页上显示的文本的幻灯片

本页