資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 HTML 和 CSS 建立一個可工作的滑塊？
概述
滑塊是一種元件，當點擊向前和向後導航按鈕時，它會製作類似幻燈片的動畫。滑塊按順序包含不同的影像，一個接一個。我們可以使用 HTML 和 CSS 建立此工作滑塊。因此，在 CSS 中，我們將使用 nth child 選擇器使滑塊工作。nth child 選擇器將從父 div 中選擇特定的子元素，並使影像顯示在首頁上。
演算法
步驟 1 − 在資料夾中建立一個 index.html 檔案，並在文字編輯器中開啟它。
步驟 2 − 現在建立一個 div 容器，其 id 為 slider。
<div id="slider"></div>
步驟 3 − 使用型別為 radio 的 input 標籤建立一個單選按鈕。
<input type="radio" name="slider" id="slider1" checked />
步驟 4 − 現在建立一個包含滑塊影像的容器。
<div class="sliderContainer"></div>
步驟 5 − 使用 img 標籤在滑塊中插入影像。
<img src="https://images.ctfassets.net/hrltx12pl8hq/4f6DfV5DbqaQUSw0uo0mWi/6fbcf889bdef65c5b92ffee86b13fc44/shutterstock_376532611.jpg?fit=fill&w=800&h=300" alt="image 1" style="width: 100%;" height="100%">
步驟 6 − 現在建立一個 label 標籤容器，並帶有 for 屬性，for 屬性的值應與我們在第一個 radio 容器中建立的單選按鈕的 id 名稱相同。
<label for="slider1"></label>
步驟 7 − 如果要向滑塊新增更多幻燈片，請重複步驟 3、5、6。
步驟 8 − 現在在同一個資料夾中建立一個 style.css 檔案，並將其連結到 index.html 檔案。
步驟 9 − 現在，要使用 style.css 檔案中給出的以下程式碼建立向前和向後導航按鈕。
步驟 10 − 還可以使用 CSS 樣式化頁面。
步驟 11 − 滑塊已準備好使用。
示例
在此示例中，我們使用純 CSS 建立了一個可工作的滑塊。CSS 的工作是使用 nth child 選擇器、單選按鈕和標籤標籤完成的。其中我們建立了兩個檔案，第一個檔案是 index.html 檔案，它包含 HTML 的骨架，另一個檔案是 style.css，它包含滑塊的工作和樣式。
<html>
<head>
<title>working slider</title>
<link rel="stylesheet" href="style.css">
<style>
* {
margin: 0;
padding: 0;
}
#slider {
height: 80vh;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
input[type=radio] {
display: none;
}
#slider label {
cursor: pointer;
}
#slides .sliderContainer {
transition: margin-left 0.2s;
width: 400%;
line-height: 0;
height: 300px;
}
#slides .slider {
width: 25%;
float: left;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #0a0a0a;
}
#controlspointer {
margin: -180px 0 0 0;
width: 100%;
height: 50px;
z-index: 3;
}
#controlspointer label {
transition: opacity 0.2s ease-out;
display: none;
width: 50px;
height: 50px;
}
img{
border-radius: 5px;
}
#slider1:checked~#slides .sliderContainer {
margin-left: 0;
}
#slider2:checked~#slides .sliderContainer {
margin-left: -100%;
}
#slider1:checked~#iloc label:nth-child(1),
#slider2:checked~#iloc label:nth-child(2) {
background: #37af00;
}
#slider1:checked~#controlspointer label:nth-child(2),
#slider2:checked~#controlspointer label:nth-child(1) {
background: url(https://img.icons8.com/ios-filled/256/chevron-right.png) no-repeat center;
float: right;
display: block;
padding: 1rem;
border-radius: 100%;
width: 1px;
height: 1px;
cursor: pointer;
box-shadow: 0 0 8px rgb(83, 83, 83);
margin-right: 0.5rem;
}
#slider1:checked~#controlspointer label:nth-last-child(2),
#slider2:checked~#controlspointer label:nth-last-child(1) {
background: url(https://img.icons8.com/ios-filled/256/chevron-left.png) no-repeat center;
float: left;
display: block;
padding: 1rem;
border-radius: 100%;
width: 1px;
height: 1px;
cursor: pointer;
box-shadow: 0 0 8px rgb(83, 83, 83);
margin-left: 0.5rem;
}
#iloc {
margin: 100px 0 0;
z-index: 9;
text-align: center;
}
#iloc label {
display: inline-block;
width: 15px;
height: 15px;
border-radius: 100%;
background: #ffffff79;
}
</style>
</head>
<body>
<h3 style="padding: 2rem;text-align: center;">Working Slider Using HTML and CSS</h3>
<div id="slider">
<input type="radio" name="slider" id="slider1" checked />
<input type="radio" name="slider" id="slider2" />
<div id="slides">
<div id="overflow">
<div class="sliderContainer">
<div class="slider slider_1">
<div class="slider-content">
<img src="https://images.ctfassets.net/hrltx12pl8hq/4f6DfV5DbqaQUSw0uo0mWi/6fbcf889bdef65c5b92ffee86b13fc44/shutterstock_376532611.jpg?fit=fill&w=800&h=300" alt="image 1" style="width: 100%;" height="100%">
</div>
</div>
<div class="slider slider_2">
<div class="slider-content">
<img src="https://images.ctfassets.net/hrltx12pl8hq/5vMt4yXH3WJfVGUro74UJ7/159813a78d63638d4a223a78e997f989/compressed_shutterstock_1283470036.jpg?fit=fill&w=800&h=300" alt="image 2" style="width: 100%;" height="100%">
</div>
</div>
</div>
</div>
</div>
<div id="controlspointer">
<label for="slider1"></label>
<label for="slider2"></label>
</div>
<div id="iloc">
<label for="slider1"></label>
<label for="slider2"></label>
</div>
</div>
</body>
</html>
下面給出了上述輸出的影像。其中它在滑塊中顯示一個影像，並帶有兩個導航按鈕和影像指標。因此，單擊右側箭頭按鈕，幻燈片的影像將更改為下一個，而單擊左側箭頭將顯示上一張幻燈片的影像。它還有一個功能，可以在影像底部顯示點，並指示它位於哪個幻燈片上。
結論
因此，在上面的示例中，我們使用了 nth child 選擇器，因為我們必須使用 CSS 構建此滑塊。但是，如果我們必須使用 javascript 構建相同的滑塊，則只需將所有幻燈片資料儲存在物件或陣列中，就可以更容易地處理它。如果我們想僅使用 CSS 構建它，則需要對 CSS 的 nth 選擇器有很好的瞭解。
3K+ 瀏覽量
