旋轉木馬在網路上非常有名。 網路旋轉木馬是一種優雅的方式，可以將相似的內容組織到一個觸覺的地方，同時保留寶貴的網站空間。它們用於展示照片、提供產品，並吸引新訪客的興趣。但是它們的效果如何？有很多反對旋轉木馬的論點，以及研究使用旋轉木馬來提高性能。但是旋轉木馬如何影響網站的可用性？
在本文中，我們將討論輪播圖的基礎知識以及如何使用HTML和CSS建立輪播圖。
什麼是輪播圖？
輪播圖是一種幻燈片展示，可以顯示一系列旋轉的橫幅/圖片。輪播圖通常出現在網站的首頁。它可以改善您的網站的外觀。 Web輪播圖，也被稱為滑桿、畫廊和幻燈片，可讓您在一個動態的「滑動」區塊中顯示文字、圖形、圖像甚至影片。它們是將內容和概念分組的優秀設計選擇，可以在特定內容之間建立視覺連結。
Web輪播圖因此非常適合在電子商務網站上推廣相關產品，在設計作品集中展示特色項目，甚至在房地產網站上循環播放家居內外照片。然而，它們並不總是最佳選擇。
許多設計師批評它們會減慢載入時間並破壞設計的流暢性。然而，與任何設計相關的事物一樣，當正確地完成時，網頁輪播可以以更容易遍歷的方式分割內容。
如何製作一個網頁輪播圖？
在這裡，我們將看到如何製作一個簡單的網頁輪播圖，而不使用像Bootstrap這樣的框架。
需要遵循的步驟
使用HTML建立走馬燈的基本結構，其中包含圖像。在下面的範例中，我們為走馬燈添加了4張圖像。此外，還有4個按鈕，點擊按鈕將顯示對應的圖像。
首先，建立一個作為容器的 div 元素，其中包含 標題 和 內容。
現在，content div 包含兩個部分- carousel content（包含在整個過渡過程中保持固定的文字部分）和slideshow# （包含移動部分，即4張圖片和按鈕）。
使用CSS來為輪播圖像和按鈕添加樣式。保持幻燈片的位置為相對定位。
使用CSS動畫使輪播中的影像平滑過渡。
Example
的中文翻譯為：範例
以下範例示範了一個包含4個影像和控制影像顯示的按鈕的輪播。這些影像以固定時間間隔進行過渡顯示。
<!DOCTYPE html>
<html>
<head>
<title> Web Carousel </title>
<style>
* {
box-sizing: border-box;
margin: 10px;
padding: 3px;
}
body {
background-color: rgb(195, 225, 235);
}
.box {
width: 600px;
height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto;
}
.title {
padding: 10px 0 10px 0;
position: absolute;
top: 10px;
}
.content {
position: relative;
top: 10%;
}
.carousel-content {
position: absolute;
top: 50%;
left: 45%;
transform: translate(-40%, -40%);
text-align: center;
z-index: 50;
}
.carousel-title {
font-size: 48px;
color: black;
margin-bottom: 1rem;
font-family: Times New Roman;
}
.slideshow {
position: relative;
height: 100%;
overflow: hidden;
}
.wrapper {
display: flex;
width: 400%;
height: 100%;
top: 10%;
border-radius: 30%;
position: relative;
animation: motion 20s infinite;
}
.slide {
width: 80%;
height: 200%;
border-radius: 30%;
}
.img {
width: 100%;
height: 100%;
object-fit: cover;
}
@keyframes motion {
0% {left: 0;}
10% {left: 0;}
15% {left: -100%;}
25% {left: -100%;}
30% {left: -200%;}
40% {left: -200%;}
45% {left: -300%;}
55% {left: -300%;}
60% {left: -200%;}
70% {left: -200%;}
75% {left: -100%;}
85% {left: -100%;}
90% {left: 0%;}
}
.button {
position: absolute;
bottom: 3%;
left: 50%;
width: 1.3rem;
height: 1.3rem;
background-color: red;
border-radius: 50%;
border: 0.2rem solid #d38800;
outline: none;
cursor: pointer;
transform: translateX(-50%);
z-index: 70;
}
.button-1 {
left: 20%;
}
.button-2 {
left: 25%;
}
.button-3 {
left: 30%;
}
.button-4 {
left: 35%;
}
.button-1:focus~.wrapper {
animation: none;
left: 0%;
}
.button-2:focus~.wrapper {
animation: none;
left: -100%;
}
.button-3:focus~.wrapper {
animation: none;
left: -200%;
}
.button-4:focus~.wrapper {
animation: none;
left: -300%;
}
.button:focus {
background-color: black;
}
</style>
</head>
<body>
<div class= "box">
<h1 id="Responsive-Carousel-using-CSS"> Responsive Carousel using CSS </h1>
<div class= "content">
<div class= "carousel-content">
</div>
<div class= "slideshow">
<button class= "button button-1"> </button>
<button class= "button button-2"> </button>
<button class= "button button-3"> </button>
<button class= "button button-4"> </button>
<div class= "wrapper">
<div class= "slide">
<img src="/static/imghwm/default1.png" data-src="https://wallpapercave.com/wp/wp2782600.jpg?x-oss-process=image/resize,p_40" class="lazy" class= "img" src= "https://www.tutorialspoint.com/static/images/simply-easy-learning.jpg" alt="如何借助CSS創建一個旋轉木馬？" >
</div>
<div class= "slide">
<img src="/static/imghwm/default1.png" data-src="https://wallpapercave.com/wp/wp2782600.jpg?x-oss-process=image/resize,p_40" class="lazy" class= "img" alt="如何借助CSS創建一個旋轉木馬？" >
</div>
<div class= "slide">
<img src="/static/imghwm/default1.png" data-src="https://i.insider.com/5fd90e7ef773c90019ff1293? style="max-width:90%" class="lazy" class= "img" alt="如何借助CSS創建一個旋轉木馬？" >
</div>
<div class= "slide">
<img src="/static/imghwm/default1.png" data-src="https://wallpaperaccess.com/full/1164582.jpg?x-oss-process=image/resize,p_40" class="lazy" class= "img" alt="如何借助CSS創建一個旋轉木馬？" >
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Transform 屬性
要修改視覺格式模型所使用的座標空間，請使用CSS中的transform屬性。透過這樣做，可以對元素應用傾斜、旋轉和平移等效果。
文法
transform: none| transform-functions| initial| inherit;
價值觀
translate(x, y) − 此函數定義了沿著X和Y座標的平移。
translate3d(x, y, z) − 此函數提供了沿著X、Y和Z座標軸的平移。
initial − 將元素設為其預設值。
inherit − 它繼承父元素的值。
CSS動畫
CSS的animation屬性允許我們在一定的時間間隔內更改元素的各種樣式屬性，從而為它添加動畫效果。
動畫的一些特性如下：
Animation-name - 它允許我們指定動畫的名稱，後續由@keyframes使用該名稱來指定要執行該動畫的CSS規則。
動畫持續時間 - 設定動畫的持續時間
動畫時間函數 - 表示動畫的速度曲線，即動畫從一組CSS自訂屬性變化到另一組所使用的時間間隔。
Animation-delay – 在給定的時間間隔內為起始值設定延遲
@keyframes用於指定在給定的時間段內動畫中需要執行的程式碼。這是透過在動畫期間為某些特定的「幀」聲明CSS屬性來實現的，百分比從0％（動畫的開始）到100％（動畫的結束）。
以上是如何借助CSS創建一個旋轉木馬？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
什麼是CSS Flexbox？Apr 30, 2025 pm 03:20 PM文章討論了CSS FlexBox，這是一種佈局方法，用於有效地對齊和分佈響應設計中的空間。它說明了FlexBox用法，將其與CSS網格進行了比較，並詳細瀏覽了瀏覽器支持。
我們如何使用CSS使網站迅速響應？Apr 30, 2025 pm 03:19 PM本文討論了使用CSS創建響應網站的技術，包括視口元標籤，靈活的網格，流體媒體，媒體查詢和相對單元。它還涵蓋了使用CSS網格和Flexbox一起使用，並推薦CSS框架
CSS盒裝屬性有什麼作用？Apr 30, 2025 pm 03:18 PM本文討論了CSS盒裝屬性，該屬性控制了元素維度的計算方式。它解釋了諸如Content-Box，Border-Box和Padding-Box之類的值，以及它們對佈局設計和形式對齊的影響。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中
MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。
SublimeText3漢化版
中文版，非常好用
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
