原生js完成輪播圖的示例代碼
發(fā)表時(shí)間：2023-04-03 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]很多網(wǎng)站上都有輪播圖， 但卻很難找到一個(gè)系統(tǒng)講解的， 因此這里做一個(gè)簡單的介紹， 希望大家都能有所收獲， 如果有哪些不正確的地方， 希望大家可以指出。 原理：將一些圖片在一行中平鋪， 然后計(jì)算偏移...
很多網(wǎng)站上都有輪播圖， 但卻很難找到一個(gè)系統(tǒng)講解的， 因此這里做一個(gè)簡單的介紹， 希望大家都能有所收獲， 如果有哪些不正確的地方， 希望大家可以指出。
原理：
將一些圖片在一行中平鋪， 然后計(jì)算偏移量再利用定時(shí)器實(shí)現(xiàn)定時(shí)輪播。
步驟一：建立html基本布局
如下所示：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>輪播圖</title></head><body> <div class="container"> <div class="wrap" style="left:-600px;"> <img class='lazy' data-original="./img/5.jpg" alt=""> <img class='lazy' data-original="./img/1.jpg" alt=""> <img class='lazy' data-original="./img/2.jpg" alt=""> <img class='lazy' data-original="./img/3.jpg" alt=""> <img class='lazy' data-original="./img/4.jpg" alt=""> <img class='lazy' data-original="./img/5.jpg" alt=""> <img class='lazy' data-original="./img/1.jpg" alt=""> </div> <div class="buttons"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow_left"><</a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow_right">></a> </div></body></html>
只有五張圖片， 卻使用7張來輪播， 這是為了實(shí)現(xiàn)無縫輪播， 后面會(huì)詳細(xì)介紹。
而5個(gè)span， 即我們可以實(shí)時(shí)看到輪播圖目前所處的位置。
最后是兩個(gè)按鈕， 可以通過它來控制前進(jìn)與后退。
這里我們需要對wrap使用絕對定位， 所以用left:-600px;將第一張圖片顯示出來。
步驟二： css布局
首先， resetcss， 如下所示：
* { margin:0; padding:0; } a{ text-decoration: none; }接著， 我們?yōu)榱俗寛D片只在container中， 所以需要限定其寬度和高度并且使用overflow:hidden；將其余的圖片隱藏起來， 并且我們希望wrap相對于container左右移動(dòng)， 所以設(shè)置為relative， 如下：
.container { position: relative; width: 600px; height: 400px; margin:100px auto 0 auto; box-shadow: 0 0 5px green; overflow: hidden; } 我們設(shè)置wrap是絕對定位的， 所以,我們就可以通過控制Left和Right來控制圖片的移動(dòng)了。 設(shè)置z-index:1;以對后面將要放置的buttons作為參考。 因?yàn)楣灿衅邚垐D片， 所以width為4200px（每張圖片我們設(shè)置為600X400）,我們只需讓圖片左浮動(dòng)即可實(shí)現(xiàn)占滿一排了。
.wrap { position: absolute; width: 4200px; height: 400px; z-index: 1; }然后我們把圖片設(shè)置位左浮動(dòng)， 并限定其大小， 如下所示：
.container .wrap img { float: left; width: 600px; height: 400px; }現(xiàn)在的效果如下：
即這時(shí)已經(jīng)顯示出了第一張圖片。 并且充滿了整個(gè)container(container是有box-shadow的);
然后我們把顯示次序的buttons放在圖片的右下角。 并且設(shè)置z-index:2;以保證buttons是在圖片的上面的。
.container .buttons { position: absolute; right: 150px; bottom:20px; width: 100px; height: 10px; z-index: 2; }然后將buttons下面的span做一個(gè)簡單的修飾， 并且給和圖片對應(yīng)的span設(shè)置一個(gè)on類， 如下：
.container .buttons span { margin-left: 5px; display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: green; text-align: center; color:white; cursor: pointer; } .container .buttons span.on{ background-color: red; }接下來， 我們把左右切換的箭頭加上， 然后做簡單的修飾， 注意：因?yàn)檫@里使用實(shí)體來表示左右箭頭， 所以設(shè)置font-size才能改變其大小，
.container .arrow { position: absolute; top: 35%; color: green; padding:0px 14px; border-radius: 50%; font-size: 50px; z-index: 2; display: none; } .container .arrow_left { left: 10px; } .container .arrow_right { right: 10px; } .container:hover .arrow { display: block; } .container .arrow:hover { background-color: rgba(0,0,0,0.2); }步驟三：添加js邏輯
我們首先獲取到 wrap（因?yàn)橐O(shè)置其left才能控制輪播圖）， 然后獲取到左右兩個(gè)箭頭， 并實(shí)現(xiàn)手動(dòng)輪播， 如下：
var wrap = document.querySelector(".wrap"); var next = document.querySelector(".arrow_right"); var prev = document.querySelector(".arrow_left"); next.onclick = function () { next_pic(); } prev.onclick = function () { prev_pic(); } function next_pic () { var newLeft = parseInt(wrap.style.left)-600; wrap.style.left = newLeft + "px"; } function prev_pic () { var newLeft = parseInt(wrap.style.left)+600; wrap.style.left = newLeft + "px"; }值得注意的是， 這里wrap.style.left是一個(gè)字符串， 所以要轉(zhuǎn)化為數(shù)字才能進(jìn)行計(jì)算， 而設(shè)定left時(shí)就要加上px成為一個(gè)字符串了。
現(xiàn)在我們來測試一下：
可以看到， 在第一頁時(shí)， left值為-600， 所以我們可以點(diǎn)擊一次上一張， 但是當(dāng)再點(diǎn)擊一次時(shí)， 就出現(xiàn)了空白。 同樣的， 下一張點(diǎn)擊， 到-3600是最后一張， 就不能再繼續(xù)點(diǎn)擊了。
也就是說， 當(dāng)我們點(diǎn)擊下一張到-3600px（這是第一張圖片）時(shí)， 我們需要下次跳轉(zhuǎn)到第二張， 即-1200px；這樣才能正常跳轉(zhuǎn)；
同理， 當(dāng)我們點(diǎn)擊上一張到0px（這是第五張圖片時(shí)）， 我們希望下次跳轉(zhuǎn)到第四張， 即-2400px；
按照這樣的思路我們重新將next_pic和prev_pic函數(shù)修改如下：
function next_pic () { var newLeft; if(wrap.style.left === "-3600px"){ newLeft = -1200; }else{ newLeft = parseInt(wrap.style.left)-600; } wrap.style.left = newLeft + "px"; } function prev_pic () { var newLeft; if(wrap.style.left === "0px"){ newLeft = -2400; }else{ newLeft = parseInt(wrap.style.left)+600; } wrap.style.left = newLeft + "px"; }這時(shí)， 我們就可以發(fā)現(xiàn)圖片可以循環(huán)播放了！
但是， 這時(shí)我們僅僅時(shí)手動(dòng)循環(huán)播放的， 我們?nèi)绻Ｍ詣?dòng)播放， 使用setInterval()即可， 如下所示：
var timer = null; function autoPlay () { timer = setInterval(function () { next_pic(); },1000); } autoPlay();即先設(shè)定一個(gè)計(jì)時(shí)器， 然后創(chuàng)建一個(gè)可以自動(dòng)播放的函數(shù)， 最后調(diào)用這個(gè)函數(shù)即可。 現(xiàn)在它就可以自動(dòng)播放了， 效果如下：
但是如果我們想要仔細(xì)看其中一個(gè)圖片的時(shí)候， 我們希望輪播圖停止播放， 只要clearInterval()即可， 如下：
var container = document.querySelector(".container"); container.onmouseenter = function () { clearInterval(timer); } container.onmouseleave = function () { autoPlay(); }現(xiàn)在， 只要我們把鼠標(biāo)移入輪播圖中， 這時(shí)輪播圖就不會(huì)播放了。 而移開鼠標(biāo)之后， 輪播圖自動(dòng)播放。
但是到目前為止， 輪播圖下方的小圓點(diǎn)還沒有動(dòng)， 現(xiàn)在我們就實(shí)現(xiàn)它。
原理很簡單， 即設(shè)置buttons的index初始值為0， 即第一個(gè)span的class為on， 然后觸發(fā)next_pic函數(shù)時(shí)， index加1， 當(dāng)觸發(fā)prev_pic函數(shù)時(shí)， inex減1， 并設(shè)置當(dāng)前index的小圓點(diǎn)的class為on， 這就要求index必須設(shè)置為全局變量， 才能保證它在每一個(gè)函數(shù)的作用域中。
添加showCurrentDot函數(shù)：
var index = 0; var dots = document.getElementsByTagName("span"); function showCurrentDot () { for(var i = 0, len = dots.length; i < len; i++){ dots[i].className = ""; } dots[index].className = "on"; }在next_pic中添加代碼：
index++; if(index > 4){ index = 0; }在prev_pic中添加大嗎：
index--; if(index < 0){ index = 4; } showCurrentDot();這樣， 輪播圖就可以自動(dòng)切換， 并且小圓點(diǎn)也在隨著圖片的變化而變化了。
但是， 這距離我們經(jīng)常看到的輪播圖還有一定距離 - - - 當(dāng)點(diǎn)擊小圓點(diǎn)時(shí)， 就可跳轉(zhuǎn)到相應(yīng)圖片。 實(shí)現(xiàn)原理即： 點(diǎn)擊小圓點(diǎn)， 就使wrap的Left變成相應(yīng)的值。 代碼如下：
for (var i = 0, len = dots.length; i < len; i++){ (function(i){ dots[i].onclick = function () { var dis = index - i; if(index == 4 && parseInt(wrap.style.left)!==-3000){ dis = dis - 5; } //和使用prev和next相同， 在最開始的照片5和最終的照片1在使用時(shí)會(huì)出現(xiàn)問題， 導(dǎo)致符號(hào)和位數(shù)的出錯(cuò)， 做相應(yīng)地處理即可 if(index == 0 && parseInt(wrap.style.left)!== -600){ dis = 5 + dis; } wrap.style.left = (parseInt(wrap.style.left) + dis * 600)+"px"; index = i; showCurrentDot(); } })(i); }原理就是當(dāng)點(diǎn)擊到小圓點(diǎn)時(shí)， 得到相應(yīng)的i值， 這個(gè)i值也就是span的index值， 我們拿他和全局變量index作比較， 然后重新設(shè)置wrap.style.left的值， 然后把i值復(fù)制給全局變量index， 最后顯示當(dāng)前的小原點(diǎn)即可。 值得注意的是：這里涉及到了閉包的概念， 如果直接使用for循環(huán)， 則不能得到正確的結(jié)果。
最終效果如圖：
最終代碼如下所示：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>輪播圖</title> <style> * { margin:0; padding:0; } a{ text-decoration: none; } .container { position: relative; width: 600px; height: 400px; margin:100px auto 0 auto; box-shadow: 0 0 5px green; overflow: hidden; } .container .wrap { position: absolute; width: 4200px; height: 400px; z-index: 1; } .container .wrap img { float: left; width: 600px; height: 400px; } .container .buttons { position: absolute; right: 5px; bottom:40px; width: 150px; height: 10px; z-index: 2; } .container .buttons span { margin-left: 5px; display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: green; text-align: center; color:white; cursor: pointer; } .container .buttons span.on{ background-color: red; } .container .arrow { position: absolute; top: 35%; color: green; padding:0px 14px; border-radius: 50%; font-size: 50px; z-index: 2; display: none; } .container .arrow_left { left: 10px; } .container .arrow_right { right: 10px; } .container:hover .arrow { display: block; } .container .arrow:hover { background-color: rgba(0,0,0,0.2); } </style></head><body> <div class="container"> <div class="wrap" style="left: -600px;"> <img class='lazy' data-original="./img/5.jpg" alt=""> <img class='lazy' data-original="./img/1.jpg" alt=""> <img class='lazy' data-original="./img/2.jpg" alt=""> <img class='lazy' data-original="./img/3.jpg" alt=""> <img class='lazy' data-original="./img/4.jpg" alt=""> <img class='lazy' data-original="./img/5.jpg" alt=""> <img class='lazy' data-original="./img/1.jpg" alt=""> </div> <div class="buttons"> <span class="on">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow arrow_left"><</a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow arrow_right">></a> </div> <script> var wrap = document.querySelector(".wrap"); var next = document.querySelector(".arrow_right"); var prev = document.querySelector(".arrow_left"); next.onclick = function () { next_pic(); } prev.onclick = function () { prev_pic(); } function next_pic () { index++; if(index > 4){ index = 0; } showCurrentDot(); var newLeft; if(wrap.style.left === "-3600px"){ newLeft = -1200; }else{ newLeft = parseInt(wrap.style.left)-600; } wrap.style.left = newLeft + "px"; } function prev_pic () { index--; if(index < 0){ index = 4; } showCurrentDot(); var newLeft; if(wrap.style.left === "0px"){ newLeft = -2400; }else{ newLeft = parseInt(wrap.style.left)+600; } wrap.style.left = newLeft + "px"; } var timer = null; function autoPlay () { timer = setInterval(function () { next_pic(); },2000); } autoPlay(); var container = document.querySelector(".container"); container.onmouseenter = function () { clearInterval(timer); } container.onmouseleave = function () { autoPlay(); } var index = 0; var dots = document.getElementsByTagName("span"); function showCurrentDot () { for(var i = 0, len = dots.length; i < len; i++){ dots[i].className = ""; } dots[index].className = "on"; } for (var i = 0, len = dots.length; i < len; i++){ (function(i){ dots[i].onclick = function () { var dis = index - i; if(index == 4 && parseInt(wrap.style.left)!==-3000){ dis = dis - 5; } //和使用prev和next相同， 在最開始的照片5和最終的照片1在使用時(shí)會(huì)出現(xiàn)問題， 導(dǎo)致符號(hào)和位數(shù)的出錯(cuò)， 做相應(yīng)地處理即可 if(index == 0 && parseInt(wrap.style.left)!== -600){ dis = 5 + dis; } wrap.style.left = (parseInt(wrap.style.left) + dis * 600)+"px"; index = i; showCurrentDot(); } })(i); } </script></body></html> 總結(jié)：
實(shí)現(xiàn)一個(gè)輪播圖還是不難的， 大體思路： 先創(chuàng)建一個(gè)div， 限定其寬度和高度， overflow：hidden。 然后創(chuàng)建一個(gè)裝圖片的div， 寬度為所有圖片的總寬度， 并且使其浮動(dòng)， 這樣所有的圖片就處于一行中。 然后為了實(shí)現(xiàn)無縫滾動(dòng)， 所以需要在首尾分別添加一張過渡圖片。 先添加兩個(gè)按鈕， 使其可以手動(dòng)輪播， 然后只需要添加一個(gè)定時(shí)器使其朝一個(gè)方向自動(dòng)輪播即可， 因?yàn)橛脩粲袝r(shí)需要查看詳情， 所以當(dāng)鼠標(biāo)進(jìn)入時(shí)就clear定時(shí)器， 滑出再定時(shí)播放。 為了更好地用戶體驗(yàn)， 我們再下面添加了一排小圓點(diǎn)， 用戶可以清楚地知道現(xiàn)在所處的位置， 最后， 利用閉包使得用戶可以直接通過點(diǎn)擊小圓點(diǎn)切換圖片。
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
