JS輪播圖的實(shí)現(xiàn)方法
本文實(shí)例為大家分享了JS輪播圖的實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
需求:
自動(dòng)輪播,鼠標(biāo)移入輪播停止、移出繼續(xù),小圓點(diǎn)點(diǎn)擊切圖,左右箭頭切圖
效果圖:
思路
通過(guò)編寫(xiě)過(guò)渡動(dòng)畫(huà)實(shí)現(xiàn)輪播效果,圖片的出現(xiàn)動(dòng)畫(huà)以及移出動(dòng)畫(huà)。顯示區(qū)的圖片移出,切換的圖進(jìn)入分別調(diào)用動(dòng)畫(huà),程序關(guān)鍵點(diǎn):哪張圖應(yīng)該進(jìn)入,哪張圖應(yīng)該移出。
輪播分為三部分:
自動(dòng)輪播,左右箭頭翻圖,底部小圓點(diǎn)點(diǎn)擊翻圖。
編寫(xiě)程序順序:
1. 小圓點(diǎn)點(diǎn)擊
為什么先做小圓點(diǎn)呢?做小圓點(diǎn)點(diǎn)擊功能時(shí),我們能夠清晰的知道哪張圖片應(yīng)該切換過(guò)來(lái),哪張圖片應(yīng)該移開(kāi)。例如,顯示區(qū)是第一張圖時(shí),點(diǎn)擊第二個(gè)原點(diǎn),那么當(dāng)前的第一張圖應(yīng)該移開(kāi),第二圖應(yīng)該進(jìn)入。
2.左右箭頭切換
這部分功能,我們可以這種思路,當(dāng)點(diǎn)擊左箭頭時(shí),相當(dāng)于我們按順序點(diǎn)擊1、2、3號(hào)小圓點(diǎn),只是顯示區(qū)為3號(hào)圖時(shí),我們需要將下一張?jiān)O(shè)置為1號(hào)圖。所以加一個(gè)判斷條件即可,當(dāng)計(jì)數(shù)器為3時(shí),重置為1;右邊箭頭相反即可 順序變?yōu)?、2、1,當(dāng)當(dāng)計(jì)數(shù)器為1時(shí),重置為3。
3.自動(dòng)輪播
這功能就相當(dāng)于在一定的時(shí)間間隔內(nèi),點(diǎn)擊右邊箭頭或者左邊箭頭。
HTML部分:
<div id='banner'> <div class='w'> <!-- 左右箭頭--> <span onclick='arrow_left()'></span> <span onclick='arrow_right()'></span> <!-- 輪播圖--> <ul> <li><img src='http://www.cgvv.com.cn/bcjs/img/1.jpg' alt=''></li> <li style='left: 1000px'><img src='http://www.cgvv.com.cn/bcjs/img/2.jpg' alt='' ></li> <li style='left: 1000px'><img src='http://www.cgvv.com.cn/bcjs/img/3.jpg' alt='' ></li> </ul> <!-- /小圓點(diǎn)--> <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'); // 移動(dòng)函數(shù) 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圖片輪播
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. python 實(shí)現(xiàn)圍棋游戲(純tkinter gui)2. Python TestSuite生成測(cè)試報(bào)告過(guò)程解析3. python之cur.fetchall與cur.fetchone提取數(shù)據(jù)并統(tǒng)計(jì)處理操作4. JSP之表單提交get和post的區(qū)別詳解及實(shí)例5. python讓函數(shù)不返回結(jié)果的方法6. PHP循環(huán)與分支知識(shí)點(diǎn)梳理7. 解決AJAX返回狀態(tài)200沒(méi)有調(diào)用success的問(wèn)題8. chat.asp聊天程序的編寫(xiě)方法9. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案10. jsp實(shí)現(xiàn)登錄驗(yàn)證的過(guò)濾器
