使用javascript實現簡單的輪播圖效果
阿新 • • 發佈：2019-02-09
最近在做公司的網站，有一個輪播圖的功能，網上倒是有現成的js元件，我用了一下swiper,但是發現嵌入進去時不太好用，好在公司的網站要求也不是很高，索性就使用純的js做一下唄。
1.首先新建一個html頁面，先把簡單的佈局做出來
我的html部分如下
<body> <div class="wrap" id="wrap"> <ul class="pics" id="pic"> <li> <img src="img/banner1.jpg" /> </li> <li> <img src="img/banner2.jpg" /> </li> <li> <img src="img/banner3.jpg" /> </li> </ul> <ol class="listNum" id="listNum"> <li class="active"><span>0</span></li> <li><span>1</span></li> <li><span>2</span></li> </ol> </div> </body>
就做一個輪播圖，為一個div,,其中輪播圖中用到的三個圖片用ul, 下面的ol 為輪播圖索引的數字
接下來，就是對此佈局進行css的樣式，思路就是 外層div（wrap）的寬度跟圖片li的寬度設定一樣，然後整個wrap部分的overflow設定為hidden, 設定為不可見，（我這裡是最簡單的輪播圖的實現，很適合初學者的使用）就用到了display屬性的none和block的切換來實現輪播圖，其他的用絕對定位，或者margin值做也是可以的，但我這裡用最簡單的實現，下面是我的css部分
<style> *{ margin: 0; padding: 0; } .wrap{ width: 1000px; height: 400px; border: 1px solid black; margin: 100px auto; overflow: hidden; position: relative; } .wrap ul{ list-style: none; } .wrap ul li{ width: 100%; height: 400px; } .wrap img{ width: 100%; height: 100%; } .listNum{ position: absolute; bottom: 5px; left: 45%; } .listNum li{ display: inline-block; border: 1px solid black; width: 15px; height: 15px; border-radius: 15px; background-color: yellow; } .listNum li:hover{ cursor: pointer; background-color: red; } .listNum li span{ display: none; } .listNum .active{ background-color: red; } </style>
這裡html部分和css部分不是重點，我這裡不做說明了。
終點是接下來的javascript部分，先貼上完整的javascript程式碼部分
<script> var timer = null; var index = 0; var wrap = null; var pic = null; var pics = null; var listNum = null; var listNumLi = null; var timer1 = null; var timer2 = null; window.onload = function(){ //alert("開始"); wrap = document.getElementById("wrap"); pic = document.getElementById("pic"); pics = pic.getElementsByTagName("li"); listNum = document.getElementById("listNum"); listNumLi = listNum.getElementsByTagName("li"); //預設輪播圖的第一個數字 timer1 = setInterval(autoPlay, 5000); //出了輪播圖 wrap.onmouseout = function(){ console.log("消失了"); timer2 = setInterval(autoPlay, 5000); } //數字索引的滑鼠進入時間 for(var i=0;i<listNumLi.length;i++){ listNumLi[i].idx = i; listNumLi[i].onmouseover = function(){ clearInterval(timer1); clearInterval(timer2); index = this.idx; changePic(this.idx); } } //進入輪播圖 wrap.onmousemove = function(){ console.log("進入了"); clearInterval(timer1); clearInterval(timer2); } } function autoPlay(){ //alert("之前的index:"+index); if(++index >= pics.length){ //alert("進來了吧index:"+index); index = 0; } //alert("之後的index:"+index); changePic(index); } function changePic(idx){ for(var i=0;i<pics.length;i++){ pics[i].style.display = "none"; } for(var i=0;i<listNumLi.length;i++){ listNumLi[i].className = ""; } //alert("idx:"+idx); pics[idx].style.display = "block"; listNumLi[idx].className = "active"; } </script>
這裡用到了js的定時器，說到定時器，先來了解一下js中的兩種定時器，
1.setTimeout(function, interval)
2.setInterval(function, interval)
這裡直接粘一下網友寫的區別吧
1、JS中的定時器有兩種：
window.setTimeout([function],[interval]) 設定一個定時器,並且設定了一個等待的時間[interval],當到達時間後,執行對應的方法[function],當方法執行完成定時器停止(但是定時器還在,只不過沒用了); window.setInterval([function],[interval]) 設定一個定時器,並且設定了一個等待的時間[interval],當到達時間後,執行對應的方法[function],當方法執行完成,定時器並沒有停止,以後每隔[interval]這麼長的時間都會重新的執行對應的方法[function],直到我們手動清除定時器為止; 2、JS中的定時器是有返回值的:->返回值是一個數字,代表當前是第幾個定時器 var timer1=window.setTimeout(function(){},1000); //timer1->1 當前是第一個定時器
var timer2=window.setTimeout(function(){},1000); //timer2->2 當前是第二個定時器
window.clearTimeout(timer1); //->把第一個定時器清除掉,這裡也可以用window.clearInterval(timer1)、window.clearTimeout(1)、window.clearInterval(timer1);
var timer3=window.setTimeout(function(){},1000); //timer3->3 當前是第三個定時器 ,雖然上面的定時器timer1清除掉了,但是號還是繼續往後排的;
3、清除定時器：
window.clearInterval(timer1)/window.clearTimeout(time1)；兩種清除方式都可以清除通過setTimeout和setInterval設定的定時器(兩種方式在設定定時器的時候有區別，清除定時器的時候沒有區別)，並且引數不僅可以是timer，還可以是其返回值，例如1,2；需要注意的是，定時器即使清除了，其返回值也不會清除，之後設定的定時器的返回值也會在其返回值的基礎上繼續向後排，這點類似於銀行的排隊領號，即使1號的業務辦理完了，後邊的人仍是從2號開始繼續領號，而不是重新從1開始；
總結：setTimeout 用一次（主要用於延時做某件事）
setInterval 主要用來迴圈做某件事
兩者的使用場景不同， 這裡粘一下 上面的地址：http://www.cnblogs.com/wangying731/p/5164780.html
好了說完定時器，下面就來說一說我這裡輪播圖的實現吧！
一。我這裡用到的是程序式程式設計，沒有用到抽象式程式設計
二。剛開始都是使用js來獲取一些元素，這裡不做介紹
三。分步驟實現
1.先實現 迴圈輪播
init()函式中的 這一句：
timer1 = setInterval(autoPlay, 5000);function autoPlay(){
//alert("之前的index:"+index);
if(++index >= pics.length){
//alert("進來了吧index:"+index);
index = 0;
}
//alert("之後的index:"+index);
changePic(index);
}
function changePic(idx){
for(var i=0;i<pics.length;i++){
pics[i].style.display = "none";
}
for(var i=0;i<listNumLi.length;i++){
listNumLi[i].className = "";
}
//alert("idx:"+idx);
pics[idx].style.display = "block";
listNumLi[idx].className = "active";
}使用定時器先將 pics中的所有圖片隱藏，在使用索引index來定時顯示 圖片 每執行一次index的值通過++index 加1 這裡使用index++不行 這裡的index為全域性變數
這樣簡單的自動輪播的功能就出來了，
接下來，再做圖片索引的滑鼠移入事件，滑鼠移入哪個索引值，就顯示哪個圖片，
//數字索引的滑鼠進入時間
for(var i=0;i<listNumLi.length;i++){
listNumLi[i].idx = i;
listNumLi[i].onmouseover = function(){
clearInterval(timer1);
clearInterval(timer2);
index = this.idx;
changePic(this.idx);
}
}接下來寫wrap區域的滑鼠一出事件，將 timer清理掉，我第一次在這裡全篇只寫了一個timer ,就是init()函式中建立的也是
timer = setInterval(autoPlay, 5000);
listNum滑鼠移入事件中建立的也是timer = setInterval(autoPlay, 5000);
所以在wrap區域的滑鼠移除事件清楚地是timer ,具體程式碼如下：
<script>
var timer = null;
var index = 0;
var wrap = null;
var pic = null;
var pics = null;
var listNum = null;
var listNumLi = null;
window.onload = function(){
//alert("開始");
wrap = document.getElementById("wrap");
pic = document.getElementById("pic");
pics = pic.getElementsByTagName("li");
listNum = document.getElementById("listNum");
listNumLi = listNum.getElementsByTagName("li");
//預設輪播圖的第一個數字
timer = setInterval(autoPlay, 5000);
//出了輪播圖
wrap.onmouseout = function(){
console.log("消失了");
timer = setInterval(autoPlay, 5000);
}
//數字索引的滑鼠進入時間
for(var i=0;i<listNumLi.length;i++){
listNumLi[i].idx = i;
listNumLi[i].onmouseover = function(){
clearInterval(timer1);
clearInterval(timer2);
index = this.idx;
changePic(this.idx);
}
}
//進入輪播圖
wrap.onmousemove = function(){
console.log("進入了");
clearInterval(timer1);
clearInterval(timer2);
}
}
function autoPlay(){
//alert("之前的index:"+index);
if(++index >= pics.length){
//alert("進來了吧index:"+index);
index = 0;
}
//alert("之後的index:"+index);
changePic(index);
}
function changePic(idx){
for(var i=0;i<pics.length;i++){
pics[i].style.display = "none";
}
for(var i=0;i<listNumLi.length;i++){
listNumLi[i].className = "";
}
//alert("idx:"+idx);
pics[idx].style.display = "block";
listNumLi[idx].className = "active";
}
</script>這樣做的後果是，有時候wrap區域的滑鼠移入時，定時器沒有清理掉，導致滑鼠已經放上輪播圖的圖片了，但是定時器還在執行，就是過一會兒輪播圖的圖片還是會變，這樣就不行。
因為init()函式中的timer和滑鼠移入數字索引時建立的timer有可能不一樣，故沒有清理掉，所以在程式碼中這兩處建立不同的timer,然後再清理的時候把這兩個timer都清理掉。具體程式碼如下：（完整的javascript程式碼）
<script>
var timer = null;
var index = 0;
var wrap = null;
var pic = null;
var pics = null;
var listNum = null;
var listNumLi = null;
var timer1 = null;
var timer2 = null;
window.onload = function(){
//alert("開始");
wrap = document.getElementById("wrap");
pic = document.getElementById("pic");
pics = pic.getElementsByTagName("li");
listNum = document.getElementById("listNum");
listNumLi = listNum.getElementsByTagName("li");
//預設輪播圖的第一個數字
timer1 = setInterval(autoPlay, 5000);
//出了輪播圖
wrap.onmouseout = function(){
console.log("消失了");
timer2 = setInterval(autoPlay, 5000);
}
//數字索引的滑鼠進入時間
for(var i=0;i<listNumLi.length;i++){
listNumLi[i].idx = i;
listNumLi[i].onmouseover = function(){
clearInterval(timer1);
clearInterval(timer2);
index = this.idx;
changePic(this.idx);
}
}
//進入輪播圖
wrap.onmousemove = function(){
console.log("進入了");
clearInterval(timer1);
clearInterval(timer2);
}
}
function autoPlay(){
//alert("之前的index:"+index);
if(++index >= pics.length){
//alert("進來了吧index:"+index);
index = 0;
}
//alert("之後的index:"+index);
changePic(index);
}
function changePic(idx){
for(var i=0;i<pics.length;i++){
pics[i].style.display = "none";
}
for(var i=0;i<listNumLi.length;i++){
listNumLi[i].className = "";
}
//alert("idx:"+idx);
pics[idx].style.display = "block";
listNumLi[idx].className = "active";
}
</script>這樣下來，一個簡單的輪播圖效果就做完了，只包含兩個簡單的功能：
1.定時輪播
2.滑鼠移入輪播圖數字所以區域時，對應的圖片顯示
但是 用滑鼠拖動圖片的功能還沒有，下次有機會再展示吧
不積跬步，無以至千里
不積小流，無以成江海