CSS 實現(xiàn)輪播圖效果(自動切換、無縫銜接、小圓點切換)
發(fā)布時間：2023-12-27 17:16:06 作者：Fetters04 
我要評論
我要評論這篇文章主要介紹了CSS 實現(xiàn)輪播圖效果(自動切換、無縫銜接、小圓點切換),，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧
案例 - 實現(xiàn)原神官網(wǎng)中的輪播圖
本文中的代碼著力實現(xiàn)該圖中的效果，一個簡單的輪播圖：
由于沒有使用到 JavaScript 所以最終呈現(xiàn)的效果不夠完美
！輪播圖的實現(xiàn)參考該 博客 （更詳細(xì)）
1、基礎(chǔ) html 代碼
- 使用
ul-li放入多張需要輪播的圖片 - 使用
input標(biāo)簽指定 type=“radio” 創(chuàng)建小圓點按鈕，并設(shè)置單獨的 id 屬性 - 使用
label的 for 屬性指定到各個 input 按鈕的 id - 將各個部分鏈接到特定的 css 樣式中
<div class="carousel_map"> <div class="slide"> <!--小圓點--> <input type="radio" name="pic" id="pic1" checked/> <input type="radio" name="pic" id="pic2"/> <input type="radio" name="pic" id="pic3"/> <input type="radio" name="pic" id="pic4"/> <div class="labels"> <label for="pic1"></label> <label for="pic2"></label> <label for="pic3"></label> <label for="pic4"></label> </div> <!--需要輪播的圖片--> <ul class="list"> <li class="item"> <a href="###"> <img src="img/news1.jpg" style="height: 100%; width: 100%;"/> </a> </li> <li class="item"> <a href="###"> <img src="img/news2.jpg" style="height: 100%; width: 100%;"/> </a> </li> <li class="item"> <a href="###"> <img src="img/news3.jpg" style="height: 100%; width: 100%;"/> </a> </li> <li class="item"> <a href="###"> <img src="img/news4.jpg" style="height: 100%; width: 100%;"/> </a> </li> <li class="item"> <a href="###"> <img src="img/news1.jpg" style="height: 100%; width: 100%;"/> </a> </li> </ul> </div> </div>
2、鏈接 css 樣式
完整 css 代碼
* {
margin: 0;
padding: 0;
}
.carousel_map {
width: 640px;
height: 400px;
}
.slide {
width: inherit;
height: inherit;
overflow: hidden;
position: relative;
}
/* 鼠標(biāo)放上去顯示按鈕 */
.slide:hover .labels {
display: flex;
}
.slide:hover .list {
animation: none;
}
.slide input {
display: none;
}
/* 按鈕位置 */
.labels {
position: absolute;
bottom: 0.5em;
z-index: 1;
width: inherit;
justify-content: center;
display: none; /* 鼠標(biāo)移開隱藏按鈕 */
}
/* 按鈕樣式 */
.labels label {
width: 1rem;
height: 1rem;
border-radius: 50%;
margin: 0 0.3rem;
border: 0.1rem solid #fff;
background-color: transparent;
box-sizing: border-box;
cursor: pointer;
}
/* 選擇哪個按鈕就有被點擊的效果 */
input[id=pic1]:checked ~ .labels label[for=pic1],
input[id=pic2]:checked ~ .labels label[for=pic2],
input[id=pic3]:checked ~ .labels label[for=pic3],
input[id=pic4]:checked ~ .labels label[for=pic4] {
background-color: #fff;
border: 0.1rem solid #fff;
}
/* 按鈕控件選擇圖片 */
input[id=pic1]:checked ~ .list {
transform: translate(calc(0 * 640px));
}
input[id=pic2]:checked ~ .list {
transform: translate(calc(-1 * 640px));
}
input[id=pic3]:checked ~ .list {
transform: translate(calc(-2 * 640px));
}
input[id=pic4]:checked ~ .list {
transform: translate(calc(-3 * 640px));
}
ul {
list-style: none;
}
.list {
width: calc(5 * 640px);
height: inherit;
position: relative;
/* 設(shè)置動畫效果 */
animation: move 15s ease 1s infinite;
}
/* 動畫關(guān)鍵幀輪播 */
@keyframes move {
0% {
transform: translate(calc(0 * 640px));
}
25% {
transform: translate(calc(-1 * 640px));
}
50% {
transform: translate(calc(-2 * 640px));
}
75% {
transform: translate(calc(-3 * 640px));
}
100% {
transform: translate(calc(-4 * 640px));
}
}
.item {
width: 640px;
height: 400px;
float: left;
}定義輪播圖的寬高
在
.carousel_map中定義要展示的輪播圖區(qū)域的寬高
* {
margin: 0;
padding: 0;
}
.carousel_map {
width: 640px;
height: 400px;
}
.slide {
width: inherit;
height: inherit;
}圖中即為要展示的區(qū)域
將所有圖片排成一排
所有圖片左浮動，調(diào)整
.list可容納的寬度，并去掉ul的默認(rèn)樣式
ul {
list-style: none;
}
.list {
width: calc(4 * 640px);
height: inherit;
position: relative;
}
.item {
width: 640px;
height: 400px;
float: left;
}
現(xiàn)實無縫切換輪播效果
1）通過動畫讓
.list水平左移，外部.slide窗口保持不變，將超出.slide的部分隱藏
2）當(dāng)動畫輪播完最后一張圖時會跳到圖1導(dǎo)致輪播不連貫，所以可以在 html 中多加一張圖1在最后
3）再給.list增加一倍的寬度
.slide {
width: inherit;
height: inherit;
/* 新增 */
overflow: hidden;
position: relative;
}
.list {
/* 多加了一張圖的寬度 */
width: calc(5 * 640px);
height: inherit;
position: relative;
/* 設(shè)置動畫效果 */
animation: move 15s ease 1s infinite;
}
/* 動畫關(guān)鍵幀輪播 */
@keyframes move {
0% {
transform: translate(calc(0 * 640px));
}
25% {
transform: translate(calc(-1 * 640px));
}
50% {
transform: translate(calc(-2 * 640px));
}
75% {
transform: translate(calc(-3 * 640px));
}
100% {
transform: translate(calc(-4 * 640px));
}
}目前已經(jīng)出現(xiàn)了輪播效果：
小圓點切換
1）設(shè)置鼠標(biāo)經(jīng)過輪播圖區(qū)域時
停止動畫
2）在HTML代碼中添加單選按鈕，通過單選按鈕的選中切換圖片，又因為單選按鈕無法設(shè)置樣式，所以使用label標(biāo)簽配合生成圓點樣式。
3）將單選按鈕隱藏，再把制作好的小圓點定位到圖片區(qū)域，以及添加選中效果。
/* 鼠標(biāo)經(jīng)過輪播圖區(qū)域停止動畫 */
.slide:hover .list {
animation: none;
}
/* 鼠標(biāo)放上去顯示按鈕 */
.slide:hover .labels {
display: flex;
}
/* 將單選按鈕隱藏 */
.slide input {
display: none;
}
/* 制作的小圓點按鈕 */
/* 按鈕位置 */
.labels {
position: absolute;
bottom: 0.5em;
z-index: 1;
width: inherit;
justify-content: center;
display: none; /* 鼠標(biāo)移開隱藏按鈕 */
}
/* 按鈕樣式 */
.labels label {
width: 1rem;
height: 1rem;
border-radius: 50%;
margin: 0 0.3rem;
border: 0.1rem solid #fff;
background-color: transparent;
box-sizing: border-box;
cursor: pointer;
}
通過圓點按鈕選中圖片切換
/* 選擇哪個按鈕就有被點擊的效果 */
input[id=pic1]:checked ~ .labels label[for=pic1],
input[id=pic2]:checked ~ .labels label[for=pic2],
input[id=pic3]:checked ~ .labels label[for=pic3],
input[id=pic4]:checked ~ .labels label[for=pic4] {
background-color: #fff;
border: 0.1rem solid #fff;
}
/* 按鈕控件選擇圖片 */
input[id=pic1]:checked ~ .list {
transform: translate(calc(0 * 640px));
}
input[id=pic2]:checked ~ .list {
transform: translate(calc(-1 * 640px));
}
input[id=pic3]:checked ~ .list {
transform: translate(calc(-2 * 640px));
}
input[id=pic4]:checked ~ .list {
transform: translate(calc(-3 * 640px));
}如圖，即可通過小圓點進(jìn)行圖片間的切換了：
到此這篇關(guān)于純 CSS 實現(xiàn)輪播圖效果(自動切換、無縫銜接、小圓點切換)的文章就介紹到這了,更多相關(guān)css輪播圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 這篇文章主要介紹了CSS3簡易切割輪播圖的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)2020-12-09
- 這篇文章主要介紹了純css實現(xiàn)輪播圖banner自動輪換效果,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-15
這篇文章主要介紹了純HTML和CSS實現(xiàn)JD輪播圖效果,需要的朋友可以參考下2018-06-01
