資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 建立輪播圖？
輪播圖在網際網路上非常常見。網頁輪播圖是一種優雅的方式，可以將類似的素材組織到一個觸手可及的地方，同時保留寶貴的網站空間。它們用於顯示照片、提供產品以及吸引新訪客的興趣。但它們的效果如何？有許多反對輪播圖的論點，以及關於使用輪播圖來提高效能的研究。但是，輪播圖如何影響網頁可用性呢？
在本文中，我們將討論輪播圖的基礎知識以及如何使用 HTML 和 CSS 建立輪播圖。
什麼是輪播圖？
輪播圖是一種幻燈片型別，用於顯示一系列旋轉的橫幅/影像。輪播圖通常位於網站的首頁。它可以提升網站的外觀。網頁輪播圖，也稱為滑塊、畫廊和幻燈片，允許您在一個動態的“滑動”塊中顯示文字、圖形、影像甚至影片。它們是組合內容和概念的絕佳設計選擇，使您可以建立特定內容片段之間的視覺聯絡。
因此，網頁輪播圖非常適合在電子商務網站上推廣相關產品，在設計作品集中展示特色專案，或者甚至在房地產網站上迴圈瀏覽房屋的室內和室外照片。但是，它們並不總是最佳選擇。
許多設計師批評它們會減慢載入時間並破壞設計的流程。但是，與任何與設計相關的事物一樣，如果操作得當，網頁輪播圖可以以一種更易於瀏覽的方式劃分內容。
如何製作網頁輪播圖？
在這裡，我們將瞭解如何在不使用 Bootstrap 等框架的情況下製作一個簡單的網頁輪播圖。
需要遵循的步驟
使用 HTML 建立輪播圖的基本結構，其中包含影像。在以下示例中，我們為輪播圖添加了 4 張影像。此外，還有 4 個按鈕，點選它們將顯示相應的影像。
首先，建立一個充當容器的 div 元素，其中包含標題和內容。
現在，內容 div 包含兩個部分 - 輪播內容（包含在整個轉換過程中保持固定的書面部分）和幻燈片（包含移動部分，即 4 張影像和按鈕）。
使用 CSS 樣式化輪播影像和按鈕。將幻燈片的定位設定為相對。
使用 CSS 動畫使輪播中影像的過渡平滑。
示例
以下示例演示了一個包含 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 class= "title"> 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 class= "img" src= "https://tutorialspoint.tw/static/images/simply-easy-learning.jpg">
</div>
<div class= "slide">
<img class= "img" src="https://wallpapercave.com/wp/wp2782600.jpg">
</div>
<div class= "slide">
<img class= "img" src="https://i.insider.com/5fd90e7ef773c90019ff1293?width=700">
</div>
<div class= "slide">
<img class= "img" src="https://wallpaperaccess.com/full/1164582.jpg">
</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 規則。
Animation-duration – 設定動畫的持續時間
Animation-timing-function – 指示動畫的速度曲線，即動畫用於從一組 CSS 自定義屬性更改到另一組 CSS 自定義屬性的時間間隔。
Animation-delay – 使給定時間間隔的起始值延遲
@keyframes 用於精確指定在給定持續時間內動畫期間需要執行哪些程式碼。這是透過在動畫期間的某些特定“幀”中宣告 CSS 屬性來完成的，百分比從 0%（動畫開始）到 100%（動畫結束）。
922 次瀏覽
