用原生JS 寫Web首頁輪播圖
目前自己在學習JS中，用目前學到的東西寫了一個輪播圖，能完整的實現輪播圖的功能，但是肯定還是有不完善的地方，也希望大家能留言交流，一起學習。
一、思路
首先將功能一個一個理順，主要功能分為三大塊：
（一）點擊左右按鈕，實現更換圖片並循環。
（二）圖片自動定時切換，當鼠標在圖片上時暫停切換，移出時恢復。
（三）輪播圖上導航點變換與點擊切換
二、實現
HTML和CSS的代碼如下：
<!doctype html>
<head>
<title>輪播圖</title>
<meta charset="utf-8">
<style>
*{
padding:0;
margin:0;
box-sizing: content-box;
text-decoration: none;
}
#container {
width:600px;
height:300px;
border:1px red solid;
overflow: hidden;
position: relative;
}
#list {
position: absolute;
z-index: 1;
width: 3000px;
}
#list img {
width: 600px;
height: 300px;
padding: 0;
margin: 0;
}
#prev {
position: absolute;
top: 40%;
left: 0;
height:70px;
width: 30px;
z-index: 2;
}
#next {
position: absolute;
top: 40%;
right: 0;
height:70px;
width: 30px;
z-index: 2;
}
#list-buttons {
position: absolute;
bottom: 5%;
z-index: 2;
width:600px;
text-align: center;
}
#list-buttons span{
display: inline-block;
width: 10px;
height: 10px;
background-color: #ffffff;
border-radius: 100%;
}
#list-buttons .on{
background-color: #b2b2b2;
}
</style>
</head>
<body>
<div id="container">
<div id="list" style="left: 0px;"> <!-- 0px為初始位置 -->
<img src="img-01.jpg" alt="1">
<img src="img-02.jpg" alt="1">
<img src="img-03.jpg" alt="1">
</div>
<div id="list-buttons">
<span class="on"></span>
<span></span>
<span></span>
</div>
<div>
<button id="prev" class="button" type="button"><</button>
<button id="next" class="button" type="button">></button>
</div>
</div>
<body>
（一）左右按鈕切換圖片
首先取得操作切換圖片的元素：
var prev = document.getElementById(‘prev‘); var next = document.getElementById(‘next‘);
然後我用三張圖片組成了一串圖片條，以圖片條的左邊緣作為圖片的起始位置，通過不斷修改圖片的起始位置，從而讓圖片顯示在可顯示的區域裏。
這裏寫了兩個函數，分別對應左右的切換按鈕。
這裏圖片的寬段是600px，要點擊next按鈕讓圖片切換下一張，那就得在讓圖片條向左移動600px。為了讓切換的圖片能夠循環，當到達最後一張圖片的位置時，再點擊下一張按鈕，就會重置到第一張圖片，以此循環。
var initial = parseInt(list.style.left); //listImage的初始數值 function nextMove(){ initial -= 600; //圖片向左滑動 if(initial < -1200){ initial = 0; } list.style.left = initial + ‘px‘; //調用dot函數，判斷當前點的位置 dot(); } function prevMove(){ initial+= 600; //圖片向右滑動 if(initial > 0){ initial = -1200; } list.style.left = initial + ‘px‘; }
（二）圖片自動定時切換與當鼠標在圖片上時暫停切換，移出時恢復
要實現定時自動播放，那就得用window.setInterval（）方法，在指定的時間間隔調用函數，同時將它返回的值賦給變量time，這裏就實現了自動切換。
var time = window.setInterval(nextMove, 2000);
.setInterval（）方法還有一個對應的clearInterval()方法，用來取消調用函數。所以我就寫了一個函數，來判斷鼠標的狀態是移進還是移出，並給圖片區域綁定了事件處理程序，這樣當鼠標移進就會暫停，移出繼續。
var container = document.getElementById(‘container‘); container.addEventListener(‘mouseenter‘, state, false); container.addEventListener(‘mouseleave‘, state, false); function state(eventName){ switch(eventName.type){ case ‘mouseenter‘: window.clearInterval(time); break; case ‘mouseleave‘: time = window.setInterval(nextMove, 2000); break; } }
（三）輪播圖上導航點變換與點擊切換
首先要實現點跟著圖片進行變換，所以聲明一個函數，判斷當前圖片條的位置，來對應設置相應位置的導航點樣式，並取消其他導航點的樣式。
var listBtn = document.getElementsByTagName(‘span‘); function dot(){ switch(initial){ case 0: console.log(‘0px‘); listBtn[0].className = ‘on‘; listBtn[1].className = ‘‘; listBtn[2].className = ‘‘; break; case -600: console.log(‘-600px‘); listBtn[0].className = ‘‘; listBtn[1].className = ‘on‘; listBtn[2].className = ‘‘; break; case -1200: console.log(‘-1200px‘); listBtn[0].className = ‘‘; listBtn[1].className = ‘‘; listBtn[2].className = ‘on‘; break; } }
最後就是當點擊相應的導航點時，跳轉到對應的圖片上了。為此，我給每個導航點添加了一個索引屬性，再通過判斷點擊的是第幾個導航點，切換到對應的圖片位置就可以了。
for(let i = 0; i < listBtn.length; i++){ listBtn[i].index = i; listBtn[i].addEventListener(‘click‘, function(){ switch(listBtn[i].index){ case 0: initial = 0; dot(); list.style.left = ‘0px‘; break; case 1: initial = -600; dot(); list.style.left = ‘-600px‘; break; case 2: initial = -1200; dot(); list.style.left = ‘-1200px‘; break; } }, false); }
以上就是整個輪播圖的實現過程。
2018-07-20
用原生JS 寫Web首頁輪播圖