說明
剛開始是打算使用jQuery中的fadeIn和fadeOut方法來完成這種帶有漸變效果的輪播圖的，由於好長時間沒有碰jQuery （實力不允許😃 ） ，所以在用jQuery嘗試了一下並且失敗了之后，就打算使用原生的JavaScript來完成了。
實現原理
我首先在CSS中定義好了兩個類，一個類是用於實現輪播時動畫消失的效果，另一個類則是用於實現輪播時動畫出現的效果；然后用到了JavaScript中關於類的基本的兩個方法：add()和remove()；通過這兩個來完成對類的增刪，從而展現出輪播的效果
具體代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高級輪播</title>
<style>
*{
margin: 0;
padding: 0;
}
.banner{
position: fixed;
top: 100px;
left: 50%;
transform: translateX(-50%);
}
.banner img{
width: 1226px;
height: 460px;
}
.banner>span{
width: 30px;
height: 60px;
color: rgb(215,211,211);
font-size: 40px;
text-align: center;
line-height: 60px;
position: absolute;
cursor: pointer;
user-select: none;
}
.banner>span:hover{
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
}
.banner>.pre{
left: 0;
top: 40%;
}
.banner>.next{
right: 0;
top:40%;
}
.disappear{
animation: moveA 1s 0s 1;
}
@keyframes moveA {
0% {
opacity: 1;
}
20% {
opacity: 0.8;
}
40% {
opacity: 0.6;
}
60% {
opacity: 0.4;
}
80% {
opacity: 0.2;
}
100% {
opacity: 0;
}
}
.appear{
animation: moveB 1s 0s 1;
}
@keyframes moveB {
0% {
opacity: 0;
}
20% {
opacity: 0.2;
}
40% {
opacity: 0.4;
}
60% {
opacity: 0.6;
}
80% {
opacity: 0.8;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="banner">
<span class="pre"><</span>
<span class="next">></span>
<a href="#">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b4eaa00be8d636a5f7b843b0704548ad.jpg?w=2452&h=920">
</a>
</div>
<script>
// 頂部輪播圖 JavaScript代碼
let currImg = document.querySelector(".banner img");
let preBtn = document.querySelector(".banner>.pre");
let nextBtn = document.querySelector(".banner>.next");
// 輪播圖的圖片路徑
let imgSrc = ["https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b4eaa00be8d636a5f7b843b0704548ad.jpg?w=2452&h=920",
"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/12a95d14eec558d7ebd585b1b3b725b0.jpg?thumb=1&w=1226&h=460",
"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/29d0a0b83843d7d1ba7a30a9400257e9.jpg?thumb=1&w=1226&h=460",
"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e52c3e98602b90f198ec316dce253cba.jpg?thumb=1&w=1226&h=460",
"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6ef43cf9f138a7fc3a39273d7e3d13b6.jpg?thumb=1&w=1226&h=460"];
// 當前索引
let currIndex = 0;
// 為向左切換按鈕添加事件
addEventForButton(preBtn, "left");
// 為向右切換按鈕添加事件
addEventForButton(nextBtn, "right");
// 自定義為切換按鈕添加事件的函數 obj為需要添加的按鈕，str取值為left/right(按鈕切換方向)
function addEventForButton(obj, str) {
obj.onclick = function () {
// 延遲 刪除動畫類 disappear appear
setTimeout(function () {
currImg.classList.remove("disappear");
currImg.classList.remove("appear");
}, 500);
// 判斷數組索引是否越界
if (str === "left") {
currIndex--;
if (currIndex < 0)
currIndex = 4;
}
if (str === "right") {
currIndex++;
if (currIndex > 4)
currIndex = 0;
}
// 增加動畫類 disappear appear
currImg.classList.add("disappear");
currImg.src = imgSrc[currIndex];
currImg.classList.add("appear");
};
}
</script>
</body>
</html>
輪播效果
