原生js之註釋很多的輪播圖
阿新 • • 發佈：2019-01-02
<script type="text/javascript">
var index=0;//建立全域性變數，也就是要獲取的當前按鈕的下標
var ul=document.getElementsByClassName("one")[0]//獲取html中的ul,之後通過操作ul來改變圖片的位置
var li=document.getElementsByClassName("two")[0];//獲取html中的ol
var lis=li.children;//獲取ol之後，需要獲取ol裡面的li,存入lis陣列中，這樣通過lis[i]就可以獲取或者操作按鈕的下標
var prevBtn = document.getElementById("left");//獲取左邊按鈕，進行上一張圖片切換
var nextBtn = document.getElementById("right");//獲取右邊按鈕，進行下一張切換
var timer = 0;
var timer1 = 0;//-建立全域性變數，用來存時間函式setInterval的值
//這裡用到了setInterval和clearInterval，簡單介紹一下，setInterval()方法可按照指定的週期(以毫秒計)來呼叫函式或計算表示式。//setInterval()方法會不停地呼叫函式，直到 clearInterval()被呼叫才會停止，
//由setInterval()返回的值可用作 clearInterval() 方法的引數。
//也就是說，在本程式碼中，clearInterval(timer1)可用於暫停setInterval();不懂的可以去百度學習一下。
function clc(li){//clc函式用於獲取當前按鈕的下標，然後傳給tab函式，進行圖片切換
for(var i=0;i<lis.length;i++){
if(lis[i]==li){
index=i;
tab();
}
}
}
function tab() {//圖片切換動畫函式
var start = ul.offsetLeft;//獲取ul盒子的左邊與父元素盒子左邊的距離，可以理解為當前ul定位left的偏移量
var end = - 400 * index;//獲取當點選按鈕之後，left需要偏移的距離（這裡的400的值是每張圖片的寬度）
var change = end - start;//實際left變化的距離
var t = 0;//建立變數t用於實現圖片切換的過渡效果
var maxT = 80;//建立t的最大值，當t變為maxT時，圖片切換完畢
for(var j = 0; j < lis.length; j++) {
lis[j].className = "";//清空按鈕的類名，用於重置高亮按鈕
}
if(index >= lis.length) {
lis[0].className = "on";//如果高亮按鈕進行到最後一個，那麼下一個高亮按鈕從第一個開始
}else {
lis[index].style.transition=".3s ease-in-out";//按鈕切換的過渡效果
lis[index].className = "on";//如果高亮按鈕沒有進行到最後一個，則為當前按鈕高亮顯示
}
clearInterval(timer1);//每一次切換圖片前對之前動畫暫停，如果不加這一句，則快速切換按鈕的時候，
//動畫會一直進行下去，也就是崩潰了。
timer1 = setInterval(function() {//每10毫秒執行一次函式
t++;//每次t加一，不用transition過渡也會有過渡效果
if(t >= maxT) {//如果t達到最大值，圖片切換完畢
clearInterval(timer1);//暫停動畫,如果不加這一句，那麼只要點選切換按鈕動畫就會一直動下去
}
ul.style.left =change/maxT*t+start+"px";
//每10毫秒移動相對於當前位置的change/maxT*t個距離，如此迴圈達到動畫效果，如果不加start
//的距離，則每次切換圖片都會從最初的位置滑動
if(index == (lis.length) && t >= maxT) {
//當圖片滑到最後一張時，將整個ul定位的left的值改為最初的樣子，這樣就達到了圖片尾首迴圈 //，這裡t >= maxT必須要加上，否則會在動畫還沒結束就跳到第一張，則沒有了無縫銜接的效果
ul.style.left = 0;//left改為原來的樣子
}
},10);//每10毫秒呼叫函式
}
function button(btn){//獲取使用者點選的是上一張還是下一張
var active=btn.innerHTML;//獲取按鈕裡面的值
if(active=="<"){//判斷使用者點選的是上一張還是下一張
//clearInterval(timer);//不加也行
prev();
}else{
//clearInterval(timer);//不加也行
next();
}
}
function prev() {//上一張圖片切換函式
index--;//每點選一次上一張按鈕，按鈕下標減一
if(index < 0 ) {//如果滑到第一張圖片，則將整個ul定位的left改為最後一張圖片的位置，這樣達到首尾迴圈
index = lis.length - 1;
ul.style.left = - lis.length *400 + "px";
}
tab();
}
function next() {//下一張圖片切換函式
index++;
if(index > lis.length) {
index = 1;
}
tab();
}
function xunhuan(){//自動輪播函式
index++;
if(index>lis.length){
index=1;
}
// ul.style.left = - 400 * index + "px";
tab();
}
var out=ul.parentNode;//獲取ul的父元素，out
var timer =setInterval(xunhuan,2000);//每兩秒呼叫自動輪播函式
out.onmouseover =function(){//當滑鼠懸浮out上面，自動輪播函式停止
clearInterval(timer);
}
out.onmouseout =function(){//當滑鼠離開，自動輪播函式繼續
timer = setInterval(xunhuan,2000);
}
</script>