首先是准備好的幾張圖片, 它們的路徑是: "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg"
代碼
最基本的 HTML 代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="css/index.css" /> <!--引入樣式表-->
<script src="js/index.js"></script> <!--引入JS腳本, 腳本用來切換圖-->
</head>
<body>
<div id="test" class="slider">
<img id="img1" src="img/1.jpg" class="current">
<img id="img2" src="img/2.jpg">
<img id="img3" src="img/3.jpg">
</div>
<button onclick="setCurrent(0)">1</button> <!--在這里, onClick調用的是用於設置當前圖片的方法, 傳入參數為圖片節點的索引-->
<button onclick="setCurrent(1)">2</button>
<button onclick="setCurrent(2)">3</button>
<button onclick="setCurrent(3)">4</button>
<button onclick="setCurrent(4)">5</button>
<button onclick="setCurrent(5)">6</button>
<script>
setInterval(moveNext, 5000); // 每隔5s, 切換到下一張圖片
</script>
</body>
</html>
引入的樣式表:
.slider { /* 指定輪播圖容器尺寸, 相對定位, 隱藏溢出內容 */
width: 750px;
height: 450px;
position: relative;
overflow: hidden;
}
.slider img { /* 指定每一個圖片的尺寸, 過渡時間, 絕對定位 */
width: 100%;
height: 100%;
transition: all 0.5s;
position: absolute;
}
.slider img { /* 指定所有圖片水平位移-100% */
transform: translateX(-100%);
}
.slider img.current { /* 指定帶有current類的圖片不進行水平移動 */
transform: translateX(0);
}
.slider img.current~img{ /* 指定位於帶有current類的圖片之后的所有圖片水平位移為100% */
transform: translateX(100%);
}
.slider img.current, /* 指定帶有current或last類的圖片置頂 */
.slider img.last{
z-index: 999;
}
引入的JavaScript:
function getImages() {
return document.getElementById("test").querySelectorAll("img"); // 搜找該頁面下輪播圖容器中的所有img
}
function getCurrent() {
return document.getElementById("test").querySelector("img.current"); // 搜找該頁面下輪播圖容器中當前展示的img
}
function setCurrent(index) {
var imgs = getImages();
var cur = getCurrent();
imgs.forEach(v => v.className = ""); // 清空所有圖片的類名
cur.className = "last"; // 設置當前展示的圖片的類名為 "last", 意為: "上一次展示的圖片"
imgs[index].className = "current"; // 設置要設置的圖片的類名為 "current"
}
function moveNext() { // 移動展示圖片到下一個
var imgs = getImages();
var curIndex;
for (curIndex = 0; curIndex < imgs.length; curIndex++) {
if (imgs[curIndex].className == "current") {
break;
}
}
if (curIndex + 1 < imgs.length) {
setCurrent(curIndex + 1);
} else {
setCurrent(0);
}
}
原理
圖片集為一個序列, 當前展示的圖片在中間, 展示圖片之前的圖片則是在左邊, 而之后的圖片則是在右邊.
任意設置一個圖片為當前展示的圖片(即設置類名為current), 那么該圖片將移動到中間. 而其它的圖片, 自然也會移動到它兩邊.
由於滑動時, 需要顯示將要展示的圖片, 以及將要隱藏的圖片, 所以這兩張圖片需要置頂, 否則, 進行多張圖片的切換時, 將由於默認層級關系而導致異常, 故設置 .current 與 .last 的 z-index 為 999.
效果
