資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用HTML和CSS程式設計幻燈片
使用HTML和CSS程式設計幻燈片，需要對HTML和CSS動畫有基本的瞭解。幻燈片以連續的方式顯示一系列內容，並具有平滑的過渡效果。
在本文中，我們將討論如何使用HTML和CSS建立幻燈片，而無需使用JavaScript。我們有一組div元素，其中包含作為幻燈片的文字內容或影像。我們的任務是使用HTML和CSS程式設計一個幻燈片。
使用HTML和CSS程式設計幻燈片的步驟
我們將遵循一個兩步過程來使用HTML和CSS程式設計幻燈片，如下所示
使用HTML建立幻燈片的結構
- 我們使用div來建立幻燈片。類名為**parent**的div充當幻燈片的容器。
- 類名為**slides**的div包含四個子元素，代表四個幻燈片，每個幻燈片顯示包裝在名為**element**的div內的唯一內容。
使用CSS設計幻燈片
- 我們使用了**parent**類，它充當幻燈片的容器，使用CSS height和width屬性設定容器的尺寸，並設定margin使其居中對齊。CSS overflow屬性確保一次只顯示一個幻燈片。
- 我們使用了**element**類來使用CSS height和width屬性設定幻燈片的尺寸。每個幻燈片都使用float屬性左浮動，並設定幻燈片文字內容的font-size。
- **slides**類包含所有四個幻燈片，其寬度等於一個幻燈片寬度的四倍，使用calc()函式。CSS animation屬性建立名為**slideShow**的動畫，該動畫無限迴圈。
- 然後，我們使用了**.element:nth-child()**，它選擇每個幻燈片，我們可以對每個幻燈片應用不同的樣式。我們使用background-color更改每個幻燈片的背景顏色，並將文字color設定為白色。
- 我們使用了@keyframes slideShow動畫，它透過調整margin-left屬性來向左移動幻燈片。我們在四個步驟中定義了我們的動畫：在20%時顯示第一個幻燈片，類似地，在40%、60%和80%時分別顯示第二個、第三個和第四個幻燈片。
示例1
這是一個完整的示例程式碼，實現了上述使用HTML和CSS程式設計幻燈片的步驟。
<html>
<head>
<title>
Programming a slideshow with HTML and CSS
</title>
<style>
.wrap {
text-align: center;
}
.parent {
height: 300px;
width: 600px;
overflow: hidden;
margin: 0 auto;
}
.element {
float: left;
height: 500px;
width: 716px;
font-size: 4rem;
}
.slides {
width: calc(716px * 4);
animation: slideShow 10s ease infinite;
}
.content {
padding: 15%;
}
.element:nth-child(1) {
background-color: #04af2f;
color: white;
}
.element:nth-child(2) {
background-color: #031926;
color: white;
}
.element:nth-child(3) {
background-color: #2c302c;
color: white;
}
.element:nth-child(4) {
background-color: rgb(68, 9, 30);
color: white;
}
@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>
<div class="wrap">
<h3>
Programming a Slideshow with HTML and CSS
</h3>
<p>
This example creates a slideshow using HTML
and CSS with CSS animations.
</p>
</div>
<div class="parent">
<div class="slides">
<div class="element">
<strong class="content">This is a slide 1</strong>
</div>
<div class="element">
<strong class="content">This is a slide 2</strong>
</div>
<div class="element">
<strong class="content">This is a slide 3</strong>
</div>
<div class="element">
<strong class="content">This is a slide 4</strong>
</div>
</div>
</div>
</body>
</html>
示例2
在這個例子中，我們使用了img標籤來建立幻燈片，而不是使用文字內容。
<html>
<head>
<title>
Programming a slideshow with HTML and CSS
</title>
<style>
.wrap {
text-align: center;
}
.parent {
height: 300px;
width: 600px;
overflow: hidden;
margin: 0 auto;
}
.element {
float: left;
height: 100px;
width: 716px;
}
.slides {
width: calc(716px * 4);
animation: slideShow 10s ease infinite;
}
img {
width: 450px;
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>
<div class="wrap">
<h3>
Programming a Slideshow with HTML and CSS
</h3>
<p>
This example creates a slideshow using HTML
and CSS with CSS animations.
</p>
</div>
<div class="parent">
<div class="slides">
<div class="element">
<img src="/html/images/test.png" alt="image 1">
</div>
<div class="element">
<img src="/css/images/css-mini-logo.jpg" alt="image 2">
</div>
<div class="element">
<img src="/html/images/test.png" alt="image 3">
</div>
<div class="element">
<img src="/css/images/css-mini-logo.jpg" alt="image 4">
</div>
</div>
</div>
</body>
</html>
結論
在本文中，使用者學習並理解了僅使用HTML和CSS程式設計幻燈片的方法。我們使用了**CSS動畫**來建立使用HTML和CSS的幻燈片。但是，建議使用JavaScript建立幻燈片，因為我們可以更好地操作它。例如，如果我們有100多個幻燈片並且需要建立幻燈片，CSS程式碼可能會變得更復雜，因為我們需要在關鍵幀中新增硬編碼的百分比值來設定動畫。
更新於：2024年9月10日
4K+ 瀏覽量
廣告