溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹JS如何實現輪播圖效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
具體內容如下
需求：
自動輪播，鼠標移入輪播停止、移出繼續，小圓點點擊切圖，左右箭頭切圖
效果圖：
思路
通過編寫過渡動畫實現輪播效果，圖片的出現動畫以及移出動畫。顯示區的圖片移出，切換的圖進入分別調用動畫，程序關鍵點：哪張圖應該進入，哪張圖應該移出。
輪播分為三部分：
自動輪播，左右箭頭翻圖，底部小圓點點擊翻圖。
編寫程序順序：
1. 小圓點點擊
為什么先做小圓點呢？做小圓點點擊功能時，我們能夠清晰的知道哪張圖片應該切換過來，哪張圖片應該移開。例如，顯示區是第一張圖時，點擊第二個原點，那么當前的第一張圖應該移開，第二圖應該進入。
2.左右箭頭切換
這部分功能，我們可以這種思路，當點擊左箭頭時，相當于我們按順序點擊1、2、3號小圓點，只是顯示區為3號圖時，我們需要將下一張設置為1號圖。所以加一個判斷條件即可，當計數器為3時，重置為1；右邊箭頭相反即可 順序變為3、2、1，當當計數器為1時，重置為3。
3.自動輪播
這功能就相當于在一定的時間間隔內，點擊右邊箭頭或者左邊箭頭。
HTML部分：
<div id="banner"> <div class="w"> <!-- 左右箭頭--> <span class="iconfont icon-zuojiantou" onclick="arrow_left()"></span> <span class="iconfont icon-youjiantou" onclick="arrow_right()"></span> <!-- 輪播圖--> <ul> <li><img src="img/1.jpg" alt=""></li> <li ><img src="img/2.jpg" alt="" ></li> <li ><img src="img/3.jpg" alt="" ></li> </ul> <!-- /小圓點--> <ol id="circleContainer"> <li onclick="move(0)"></li> <li onclick="move(1)"></li> <li onclick="move(2)"></li> </ol> </div> </div>
CSS部分：
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.w {
width: 1000px;
height: 600px;
margin: 100px auto 0;
position: relative;
overflow: hidden;
}
ul {
height: 600px;
}
@keyframes leftCome {
from {
left: -100%;
}
to {
left: 0;
}
}
@keyframes leftOut {
from {
left: 0;
}
to {
left: 100%;
}
}
@keyframes rightCome {
from {
left: 100%;
}
to {
left: 0;
}
}
@keyframes rightOut {
from {
left: 0;
}
to {
left: -100%;
}
}
ul li {
position: absolute;
width: 1000px;
}
ul li img {
width: 100%;
height: 600px;
}
.iconfont {
color: white;
position: absolute;
font-size: 30px;
top: calc(50% - 15px);
background-color: rgba(216, 216, 216, 0.23);
cursor: pointer;
opacity: 0;
transition: opacity .3s linear;
z-index: 999;
}
.iconfont:hover {
color: palegreen;
}
.icon-zuojiantou {
left: 0;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}
.icon-youjiantou {
right: 0;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
#circleContainer {
position: absolute;
bottom: 10px;
left: calc(50% - 30px);
}
#circleContainer li {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: white;
margin-right: 5px;
}
#circleContainer .change {
background-color: palegreen;
box-shadow: 0 0 10px #7dd07d;
}
</style>JS部分：
<script>
let timer ;
window.onload = function(){
timer = setInterval(function () {
arrow_left();
},3000)
};
let arrow = document.querySelectorAll(".iconfont");
let w = document.querySelector(".w");
let circle = document.querySelectorAll("ol li");
w.addEventListener("mouseenter",function () {
clearInterval(timer);
arrow[0].style.opacity = "1";
arrow[1].style.opacity = "1";
});
w.addEventListener("mouseleave",function () {
arrow[0].style.opacity = "0";
arrow[1].style.opacity = "0";
timer = setInterval(function () {
arrow_left();
},3000)
});
circle[0].className = "change";
let location_i = 0;
let li = document.querySelectorAll("ul li");
// 移動函數
function move(i,direcTion_) {
if (direcTion_ === "right") {
if (location_i !== i) {
li[i].style.animation = "rightCome .5s ease forwards";
li[location_i].style.animation = "rightOut .5s ease forwards";
location_i = i;
num = i;
}
} else {
if (location_i !== i) {
li[i].style.animation = "leftCome .5s ease forwards";
li[location_i].style.animation = "leftOut .5s ease forwards";
location_i = i;
num = i;
}
}
for (let i = 0 ; i<circle.length ;i++){
circle[i].className = "";
}
circle[location_i].className = "change";
}
// 右箭頭
let flag = true;
let num = 0;
function arrow_right() {
flag = false ;
num === 2 ? num = 0 : num = location_i + 1;
move(num);
}
// 左箭頭
function arrow_left() {
num === 0 ? num = 2 : num = location_i - 1;
move(num,"right");
}
</script>以上是JS如何實現輪播圖效果的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
