本文例項為大家分享了js實現輪播圖的具體程式碼，供大家參考，具體內容如下

又從頭到尾把輪播圖研究了一遍，感覺理解更深刻了。
就怕自己搞不懂，分析了各個步驟的思路，為啥用，怎麼用。
總算搞清楚了。
話不多說，乾貨奉上.

效果圖：

//1，左右按鈕初始隱藏 滑鼠進入box 按鈕顯示 滑鼠離開box 按鈕隱藏
//獲取元素
var box = document.getElementById('box');
var leftbtn = document.getElementById('leftbtn');
var rigbtn = document.getElementById('rigbtn');
//因為圖片寬度是多個事件需要用到 所以要定義為全域性變數
var pic_width = box.clientWidth;
//註冊事件
box.addEventListener('mouseenter',function() {
 leftbtn.style.display = 'block';
 rigbtn.style.display = 'block';
 //清除定時器 停止自動播放 
 clearInterval(timer);
 //停止播放後 清空定時器變數 提升執行效率
 timer = null;
});
box.addEventListener('mouseleave',function() {
 leftbtn.style.display = 'none';
 rigbtn.style.display = 'none';
 //timer在11條裡宣告過了 這裡就不需要再加var進行聲明瞭
 timer = setInterval(function() {
 rigbtn.click();
 },1500);
});
//6，建立動畫函式animate 點選小圓點 圖片會移動 
//因為圖片需要緩慢移動到目標位置 而不是瞬移 所以需要讓動畫函式帶緩動效果
function animate(obj,target,callback) {
 //obj是移動的物件 target是移動的目標位置 callback是回撥函式
 clearInterval(obj.timer);
 //建立緩動函式 緩動的核心思想就是把移動到目標位置的距離分成若干小步
 //一定時間內走一小步，讓這個距離在若干時間完成若干小步後走完
 function move() {
 //定義每一小步走的距離 把一次移動到目標位置的距離分為10份
 //每一份就是一個step
 var step = (target - obj.offsetLeft) / 10;
 //step可能不是整數 導致最終移動距離有誤差 
 //所以要把每一步的step變成整數
 //如果step是正數 就取大於step的最小整數
 //如果step是負數 就取小於step的最大整數 用Math()的知識
 /*if(step > 0) {
 step = Math.ceil(step);//向上取整
 } else {
 step = Math.floor(step);//向下取整
 }*/
 //可以將上面的if else語句簡化為三元運算子
 step = step > 0 ? Math.ceil(step) : Math.floor(step);
 //如果走到了目標位置 就清除定時器
 if(obj.offsetLeft == target) {
 clearInterval(obj.timer);
 //因為回撥函式是定時器結束後再呼叫函式 
 //所以這裡清除定時器後 需要判斷一下是否有回撥函式 有就呼叫 沒有就不呼叫
 /*if(callback) {
 callback();
 }*/
 //上面的判斷語句可以簡化為
 callback&&callback();
 }
 //把每一小步移動的距離和offsetLeft之和，給obj的left值
 //注意，這裡obj.style.left對應的是數值+畫素單位，一定不要忘了+'px'
 obj.style.left = obj.offsetLeft + step + 'px';
 }
 //給obj建立專屬的定時器 
 //用定時器實現一定時間走一小步的結果 這裡是40毫秒移動一個step的距離
 //注意，專屬定時器不需要用var了 
 obj.timer = setInterval(move,40);
}
//2，動態新增小圓點 圖片的數量就是小圓點的個數
//獲取元素
var ul01 = document.getElementById('ul01');
var ul02 = document.getElementById('ul02');
//新增多個li 用for迴圈 
for(var i = 0; i < ul01.children.length; i++) {
 //建立元素creLi
 var creLi = document.createElement('li');
 //3，建立自定義屬性data-index 用來獲取小圓點的索引號
 creLi.setAttribute('data-index',i); 
 //新增元素
 ul02.appendChild(creLi);
 //4,當前點選的小圓點 顏色發生變化 建立類urrent
 //因為圖片預設開始顯示第一張 所以先讓第一個小圓點小時current類
 ul02.children[0].className = 'current';
 //5，給小圓點建立點選事件 點選小圓點 當前點選的小圓點變色
 //用排他思想 for迴圈
 //註冊點選事件
 creLi.addEventListener('click',function() {
 //幹掉所有人
 for(var i = 0; i < ul02.children.length; i++) {
 ul02.children[i].className = '';
 }
 //留下我自己
 this.className = 'current';
 //7，點選小圓點 圖片跟著動 呼叫動畫函式
 //分析 點選圓點1 圖片向左移動0個圖片的寬度box.clientWidth
 //點選圓點2 圖片向左移動1個圖片的寬度 以此類推
 //圖片移動的距離 就是 當前被點選圓點的索引號乘以圖片的寬度
 
 //獲取自定義屬性 當前被點選的小圓點的索引號
 var index = this.getAttribute('data-index');
 num = index;
 circle = index;
 animate(ul01,-index*pic_width);
 });
}
//8，右側按鈕
//8.1 點選右側按鈕 圖片向左移動
//點選1次 圖片向左移動1個圖片寬度 顯示圖片2
//點選2次 向左移動2個圖片寬度 顯示圖片3 以此類推
//當顯示到第3張圖片即最後一張圖片時 再點選右側按鈕 會顯示空白
//重點： 實現無縫連結，即當顯示到最後一張圖片時 再點選右側按鈕 會顯示圖片1
//怎麼做 在圖片3後面克隆一張圖片1
//顯示圖片3時 再點選按鈕 ul01繼續向左移動 顯示圖片1
//然後迅速跳轉到跳轉到圖片1 讓ul01.style.left歸零
//設定次數變數num
var num = 0;
//克隆圖片1 先克隆 再新增 注意 克隆圖片也是全域性事件 不是區域性的
var liCopy = ul01.children[0].cloneNode(true)//深克隆
ul01.appendChild(liCopy);//新增新的li後，注意取css裡修改ul01的寬度
//console.log(ul01.children.length); 元素個數變成了4
//獲取元素rigbtn
var rigbtn = document.getElementById('rigbtn');
//給按鈕點選事件安裝節流閥
var flag = true; //左右按鈕都要用 所以設定全域性變數

//註冊點選事件
rigbtn.addEventListener('click',function() {
 if(flag) {
 //初始狀態 先把節流閥關了 讓自動播放的圖片播放完一張圖片前 點選按鈕無效
 flag = false;
 //先做個判斷 
 //點選第2次的時候 顯示圖片3 再點選 就顯示克隆的圖片1 
 //這時候 讓ul01位置歸零 讓num的值歸零以便從頭開始
 if(num == ul01.children.length - 1) {
 ul01.style.left = 0;
 num = 0;
 }
 //點選1次 移動距離就是1*pic_width
 //點選1次 讓num自增1
 num++;
 //注意 這裡如果先自增 再做判斷
 //會出現一個bug 就是當再次顯示圖片1時 點選無效 重新點選才會顯示圖片2
 //因為點選第三次時 本來應該跳轉到圖片1的 結果num被歸零了 再點選還是顯示圖片1
 //呼叫動畫函式
 
 animate(ul01,-num*pic_width,function() {
 //function(){}是回撥函式
 //動畫結束一個動作後 即播放完該圖片後 再回頭開啟節流閥 讓下一次點選生效
 flag = true;
 });
 circle++;
 if(circle == ul02.children.length) {
 circle = 0;
 }
 //因為這段排他思想的小圓點程式碼重複使用 所以可以封裝成一個函式進行呼叫
 /*for(var i = 0; i < ul02.children.length; i++) {
 ul02.children[i].className = '';
 }
 ul02.children[circle].className = 'current';*/
 cir();
 }
}); 

function cir() {
 for(var i = 0; i < ul02.children.length; i++) {
 ul02.children[i].className = '';
 }
 ul02.children[circle].className = 'current';
}
//9，點選按鈕 圖片移動 小圓點跟著移動 點選小圓點 圖片跟著移動 num次數也變化
//讓圖片 小圓點 按鈕次數 一起變化的核心 就是圖片動 num變化 小圓點當前的current類發生變化
//即 圖片移動 當前小圓點變色 點選按鈕 當前小圓點變色
//當前小圓點變色 圖片移動 按鈕次數發生變化 num index 圖片距離 一起變化 
//但是index是區域性變數 怎麼讓三者繫結呢
//就要重新建立一個全域性變數 代替index 作為小圓點當前的索引號 讓三者繫結
var circle = 0;
//10，點選左側按鈕
//和右側按鈕點選事件的程式碼基本相同 但是方向相反 需要修改一些資料
//直接把右側按鈕點選事件的程式碼複製過來 然後修改資料
//獲取元素leftbtn
var leftbtn = document.getElementById('leftbtn');
//註冊點選事件
leftbtn.addEventListener('click',function() {
 //同理，給左側按鈕也加個節流閥
 if(flag) {
 flag = false;
 //先做個判斷 
 //開始時 未點選 num為0
 if(num == 0) {
 num = ul01.children.length-1;
 ul01.style.left = -num*pic_width + 'px';
 }
 //點選左側按鈕時 num自減
 num--;
 
 animate(ul01,function() {
 flag = true;
 });
 circle--;
 if(circle < 0) {
 circle = ul02.children.length - 1;
 }
 //因為這段排他思想的小圓點程式碼重複使用 所以可以封裝成一個函式進行呼叫
 /*for(var i = 0; i < ul02.children.length; i++) {
 ul02.children[i].className = '';
 }
 ul02.children[circle].className = 'current';*/
 cir();
 }
});
//11，圖片自動播放 相當於每隔一定時間 用定時器呼叫點選右側按鈕的時間 
var timer = setInterval(function() {
 rigbtn.click();
},1500);
//12，滑鼠進入box 停止自動播放 滑鼠離開box 繼續自動播放
//13，節流閥 控制圖片播放的頻率
//當前 快速點選按鈕 圖片高速播放 timer定時器還沒執行結束 就開始播放下一張圖片了
//用flag控制 flag為true 開啟節流閥 啟用定時器 播放圖片
//flag為false 關閉節流閥 關閉的定時器 點選按鈕無效 停止播放圖片
//給按鈕點選事件安裝節流閥

精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。