JS輪播圖的實現方法
阿新 • • 發佈:2020-08-26
本文例項為大家分享了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="JS輪播圖的實現方法"></li> <li style="left: 1000px"><img src="img/2.jpg" alt="JS輪播圖的實現方法" ></li> <li style="left: 1000px"><img src="img/3.jpg" alt="JS輪播圖的實現方法" ></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,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>
精彩專題分享:jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。