本文實(shí)例為大家分享了js實(shí)現(xiàn)輪播圖的具體代碼，供大家參考，具體內(nèi)容如下

又從頭到尾把輪播圖研究了一遍，感覺(jué)理解更深刻了。就怕自己搞不懂，分析了各個(gè)步驟的思路，為啥用，怎么用。總算搞清楚了。話(huà)不多說(shuō)，干貨奉上.

效果圖：

//1，左右按鈕初始隱藏 鼠標(biāo)進(jìn)入box 按鈕顯示 鼠標(biāo)離開(kāi)box 按鈕隱藏//獲取元素var box = document.getElementById(’box’);var leftbtn = document.getElementById(’leftbtn’);var rigbtn = document.getElementById(’rigbtn’);//因?yàn)閳D片寬度是多個(gè)事件需要用到 所以要定義為全局變量var pic_width = box.clientWidth;//注冊(cè)事件box.addEventListener(’mouseenter’, function() { leftbtn.style.display = ’block’; rigbtn.style.display = ’block’; //清除定時(shí)器 停止自動(dòng)播放 clearInterval(timer); //停止播放后 清空定時(shí)器變量 提升運(yùn)行效率 timer = null;});box.addEventListener(’mouseleave’, function() { leftbtn.style.display = ’none’; rigbtn.style.display = ’none’; //timer在11條里聲明過(guò)了 這里就不需要再加var進(jìn)行聲明了 timer = setInterval(function() { rigbtn.click(); }, 1500);});//6，創(chuàng)建動(dòng)畫(huà)函數(shù)animate 點(diǎn)擊小圓點(diǎn) 圖片會(huì)移動(dòng) //因?yàn)閳D片需要緩慢移動(dòng)到目標(biāo)位置 而不是瞬移 所以需要讓動(dòng)畫(huà)函數(shù)帶緩動(dòng)效果function animate(obj, target, callback) { //obj是移動(dòng)的對(duì)象 target是移動(dòng)的目標(biāo)位置 callback是回調(diào)函數(shù) clearInterval(obj.timer); //創(chuàng)建緩動(dòng)函數(shù) 緩動(dòng)的核心思想就是把移動(dòng)到目標(biāo)位置的距離分成若干小步 //一定時(shí)間內(nèi)走一小步，讓這個(gè)距離在若干時(shí)間完成若干小步后走完 function move() { //定義每一小步走的距離 把一次移動(dòng)到目標(biāo)位置的距離分為10份 //每一份就是一個(gè)step var step = (target - obj.offsetLeft) / 10; //step可能不是整數(shù) 導(dǎo)致最終移動(dòng)距離有誤差 //所以要把每一步的step變成整數(shù) //如果step是正數(shù) 就取大于step的最小整數(shù) //如果step是負(fù)數(shù) 就取小于step的最大整數(shù) 用Math()的知識(shí) /*if(step > 0) { step = Math.ceil(step);//向上取整 } else { step = Math.floor(step);//向下取整 }*/ //可以將上面的if else語(yǔ)句簡(jiǎn)化為三元運(yùn)算符 step = step > 0 ? Math.ceil(step) : Math.floor(step); //如果走到了目標(biāo)位置 就清除定時(shí)器 if(obj.offsetLeft == target) { clearInterval(obj.timer); //因?yàn)榛卣{(diào)函數(shù)是定時(shí)器結(jié)束后再調(diào)用函數(shù) //所以這里清除定時(shí)器后 需要判斷一下是否有回調(diào)函數(shù) 有就調(diào)用 沒(méi)有就不調(diào)用 /*if(callback) { callback(); }*/ //上面的判斷語(yǔ)句可以簡(jiǎn)化為 callback&&callback(); } //把每一小步移動(dòng)的距離和offsetLeft之和，給obj的left值 //注意，這里obj.style.left對(duì)應(yīng)的是數(shù)值+像素單位，一定不要忘了+’px’ obj.style.left = obj.offsetLeft + step + ’px’; } //給obj創(chuàng)建專(zhuān)屬的定時(shí)器 //用定時(shí)器實(shí)現(xiàn)一定時(shí)間走一小步的結(jié)果 這里是40毫秒移動(dòng)一個(gè)step的距離 //注意，專(zhuān)屬定時(shí)器不需要用var了 obj.timer = setInterval(move, 40);}//2，動(dòng)態(tài)添加小圓點(diǎn) 圖片的數(shù)量就是小圓點(diǎn)的個(gè)數(shù)//獲取元素var ul01 = document.getElementById(’ul01’);var ul02 = document.getElementById(’ul02’);//添加多個(gè)li 用for循環(huán) for(var i = 0; i < ul01.children.length; i++) { //創(chuàng)建元素creLi var creLi = document.createElement(’li’); //3，創(chuàng)建自定義屬性data-index 用來(lái)獲取小圓點(diǎn)的索引號(hào) creLi.setAttribute(’data-index’, i); //添加元素 ul02.appendChild(creLi); //4,當(dāng)前點(diǎn)擊的小圓點(diǎn) 顏色發(fā)生變化 創(chuàng)建類(lèi)urrent //因?yàn)閳D片默認(rèn)開(kāi)始顯示第一張 所以先讓第一個(gè)小圓點(diǎn)小時(shí)current類(lèi) ul02.children[0].className = ’current’; //5，給小圓點(diǎn)創(chuàng)建點(diǎn)擊事件 點(diǎn)擊小圓點(diǎn) 當(dāng)前點(diǎn)擊的小圓點(diǎn)變色 //用排他思想 for循環(huán) //注冊(cè)點(diǎn)擊事件 creLi.addEventListener(’click’, function() { //干掉所有人 for(var i = 0; i < ul02.children.length; i++) { ul02.children[i].className = ’’; } //留下我自己 this.className = ’current’; //7，點(diǎn)擊小圓點(diǎn) 圖片跟著動(dòng) 調(diào)用動(dòng)畫(huà)函數(shù) //分析 點(diǎn)擊圓點(diǎn)1 圖片向左移動(dòng)0個(gè)圖片的寬度box.clientWidth //點(diǎn)擊圓點(diǎn)2 圖片向左移動(dòng)1個(gè)圖片的寬度 以此類(lèi)推 //圖片移動(dòng)的距離 就是 當(dāng)前被點(diǎn)擊圓點(diǎn)的索引號(hào)乘以圖片的寬度 //獲取自定義屬性 當(dāng)前被點(diǎn)擊的小圓點(diǎn)的索引號(hào) var index = this.getAttribute(’data-index’); num = index; circle = index; animate(ul01, -index*pic_width); });}//8，右側(cè)按鈕//8.1 點(diǎn)擊右側(cè)按鈕 圖片向左移動(dòng)//點(diǎn)擊1次 圖片向左移動(dòng)1個(gè)圖片寬度 顯示圖片2//點(diǎn)擊2次 向左移動(dòng)2個(gè)圖片寬度 顯示圖片3 以此類(lèi)推//當(dāng)顯示到第3張圖片即最后一張圖片時(shí) 再點(diǎn)擊右側(cè)按鈕 會(huì)顯示空白//重點(diǎn)： 實(shí)現(xiàn)無(wú)縫鏈接，即當(dāng)顯示到最后一張圖片時(shí) 再點(diǎn)擊右側(cè)按鈕 會(huì)顯示圖片1//怎么做 在圖片3后面克隆一張圖片1//顯示圖片3時(shí) 再點(diǎn)擊按鈕 ul01繼續(xù)向左移動(dòng) 顯示圖片1//然后迅速跳轉(zhuǎn)到跳轉(zhuǎn)到圖片1 讓ul01.style.left歸零//設(shè)置次數(shù)變量numvar num = 0;//克隆圖片1 先克隆 再添加 注意 克隆圖片也是全局事件 不是局部的var liCopy = ul01.children[0].cloneNode(true)//深克隆ul01.appendChild(liCopy);//添加新的li后，注意取css里修改ul01的寬度//console.log(ul01.children.length); 元素個(gè)數(shù)變成了4//獲取元素rigbtnvar rigbtn = document.getElementById(’rigbtn’);//給按鈕點(diǎn)擊事件安裝節(jié)流閥var flag = true; //左右按鈕都要用 所以設(shè)置全局變量//注冊(cè)點(diǎn)擊事件rigbtn.addEventListener(’click’, function() { if(flag) { //初始狀態(tài) 先把節(jié)流閥關(guān)了 讓自動(dòng)播放的圖片播放完一張圖片前 點(diǎn)擊按鈕無(wú)效 flag = false; //先做個(gè)判斷 //點(diǎn)擊第2次的時(shí)候 顯示圖片3 再點(diǎn)擊 就顯示克隆的圖片1 //這時(shí)候 讓ul01位置歸零 讓num的值歸零以便從頭開(kāi)始 if(num == ul01.children.length - 1) { ul01.style.left = 0; num = 0; } //點(diǎn)擊1次 移動(dòng)距離就是1*pic_width //點(diǎn)擊1次 讓num自增1 num++; //注意 這里如果先自增 再做判斷 //會(huì)出現(xiàn)一個(gè)bug 就是當(dāng)再次顯示圖片1時(shí) 點(diǎn)擊無(wú)效 重新點(diǎn)擊才會(huì)顯示圖片2 //因?yàn)辄c(diǎn)擊第三次時(shí) 本來(lái)應(yīng)該跳轉(zhuǎn)到圖片1的 結(jié)果num被歸零了 再點(diǎn)擊還是顯示圖片1 //調(diào)用動(dòng)畫(huà)函數(shù) animate(ul01, -num*pic_width, function() { //function(){}是回調(diào)函數(shù) //動(dòng)畫(huà)結(jié)束一個(gè)動(dòng)作后 即播放完該圖片后 再回頭打開(kāi)節(jié)流閥 讓下一次點(diǎn)擊生效 flag = true; }); circle++; if(circle == ul02.children.length) { circle = 0; } //因?yàn)檫@段排他思想的小圓點(diǎn)代碼重復(fù)使用 所以可以封裝成一個(gè)函數(shù)進(jìn)行調(diào)用 /*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，點(diǎn)擊按鈕 圖片移動(dòng) 小圓點(diǎn)跟著移動(dòng) 點(diǎn)擊小圓點(diǎn) 圖片跟著移動(dòng) num次數(shù)也變化//讓圖片 小圓點(diǎn) 按鈕次數(shù) 一起變化的核心 就是圖片動(dòng) num變化 小圓點(diǎn)當(dāng)前的current類(lèi)發(fā)生變化//即 圖片移動(dòng) 當(dāng)前小圓點(diǎn)變色 點(diǎn)擊按鈕 當(dāng)前小圓點(diǎn)變色//當(dāng)前小圓點(diǎn)變色 圖片移動(dòng) 按鈕次數(shù)發(fā)生變化 num index 圖片距離 一起變化 //但是index是局部變量 怎么讓三者綁定呢//就要重新創(chuàng)建一個(gè)全局變量 代替index 作為小圓點(diǎn)當(dāng)前的索引號(hào) 讓三者綁定var circle = 0;//10，點(diǎn)擊左側(cè)按鈕//和右側(cè)按鈕點(diǎn)擊事件的代碼基本相同 但是方向相反 需要修改一些數(shù)據(jù)//直接把右側(cè)按鈕點(diǎn)擊事件的代碼復(fù)制過(guò)來(lái) 然后修改數(shù)據(jù)//獲取元素leftbtnvar leftbtn = document.getElementById(’leftbtn’);//注冊(cè)點(diǎn)擊事件leftbtn.addEventListener(’click’, function() { //同理，給左側(cè)按鈕也加個(gè)節(jié)流閥 if(flag) { flag = false; //先做個(gè)判斷 //開(kāi)始時(shí) 未點(diǎn)擊 num為0 if(num == 0) { num = ul01.children.length-1; ul01.style.left = -num*pic_width + ’px’; } //點(diǎn)擊左側(cè)按鈕時(shí) num自減 num--; animate(ul01, -num*pic_width, function() { flag = true; }); circle--; if(circle < 0) { circle = ul02.children.length - 1; } //因?yàn)檫@段排他思想的小圓點(diǎn)代碼重復(fù)使用 所以可以封裝成一個(gè)函數(shù)進(jìn)行調(diào)用 /*for(var i = 0; i < ul02.children.length; i++) { ul02.children[i].className = ’’; } ul02.children[circle].className = ’current’;*/ cir(); }});//11，圖片自動(dòng)播放 相當(dāng)于每隔一定時(shí)間 用定時(shí)器調(diào)用點(diǎn)擊右側(cè)按鈕的時(shí)間 var timer = setInterval(function() { rigbtn.click();}, 1500);//12，鼠標(biāo)進(jìn)入box 停止自動(dòng)播放 鼠標(biāo)離開(kāi)box 繼續(xù)自動(dòng)播放//13，節(jié)流閥 控制圖片播放的頻率//當(dāng)前 快速點(diǎn)擊按鈕 圖片高速播放 timer定時(shí)器還沒(méi)執(zhí)行結(jié)束 就開(kāi)始播放下一張圖片了//用flag控制 flag為true 打開(kāi)節(jié)流閥 啟用定時(shí)器 播放圖片//flag為false 關(guān)閉節(jié)流閥 關(guān)閉的定時(shí)器 點(diǎn)擊按鈕無(wú)效 停止播放圖片//給按鈕點(diǎn)擊事件安裝節(jié)流閥

精彩專(zhuān)題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。