下面看下js輪播圖的實(shí)現(xiàn)代碼，具體代碼如下所示：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; list-style: none; border: 0; } .all { width: 500px; height: 200px; padding: 7px; border: 1px solid #ccc; margin: 100px auto; position: relative; } .screen { width: 500px; height: 200px; overflow: hidden; position: relative; } .screen li { width: 500px; height: 200px; overflow: hidden; float: left; } .screen ul { position: absolute; left: 0; top: 0px; width: 3000px; } .all ol { position: absolute; right: 10px; bottom: 10px; line-height: 20px; text-align: center; } .all ol li { float: left; width: 20px; height: 20px; background: #fff; border: 1px solid #ccc; margin-left: 10px; cursor: pointer; } .all ol li.current { background: yellow; } #arr { display: none; } #arr span { width: 40px; height: 40px; position: absolute; left: 5px; top: 50%; margin-top: -20px; background: #000; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑體'; font-size: 30px; color: #fff; opacity: 0.3; border: 1px solid #fff; } #arr #right { right: 5px; left: auto; } </style></head><body><div class="all" id='box'> <div class="screen"> <ul> <li><img src="images/1.jpg" width="500" height="200"/></li> <li><img src="images/2.jpg" width="500" height="200"/></li> <li><img src="images/3.jpg" width="500" height="200"/></li> <li><img src="images/4.jpg" width="500" height="200"/></li> <li><img src="images/5.jpg" width="500" height="200"/></li> </ul> <ol> </ol> </div> <div id="arr"><span id="left"><</span><span id="right">></span></div></div><script> function $(element) { return document.getElementById(element); } var box = $("box"); var screen = box.children[0]; var ul = screen.children[0]; var ulLis = ul.children; var ol = screen.children[1]; var arr = $("arr"); var left = $("left"); var right = $("right"); //動態(tài)創(chuàng)建小圖標(biāo) for (var i = 0; i < ulLis.length; i++) { var li = document.createElement("li"); li.innerHTML = i + 1; ol.appendChild(li); } //設(shè)置這些個(gè)小圖標(biāo) var olLis = ol.children; var imgWidth = screen.offsetWidth; for (var j = 0; j < olLis.length; j++) { olLis[j].index = j; olLis[j].onmouseover = function () { //排他思想 for (var i = 0; i < olLis.length; i++) { olLis[i].className = ""; } this.className = "current"; var target = -imgWidth * this.index; cutton(ul, target, 20); //為了讓點(diǎn)擊事件和小面的小圖標(biāo)能夠一一對應(yīng)，設(shè)置他們的索引值相同 pic = square = this.index; } } //給小圖標(biāo)設(shè)置一個(gè)初始樣式 ol.children[0].className = "current"; //給ul追加一張圖 ul.appendChild(ul.children[0].cloneNode(true)); //設(shè)置箭頭的顯示與隱藏 box.onmouseover = function () { arr.style.display = "block"; //鼠標(biāo)放上去的時(shí)候，不再自動滾動 clearInterval(timer); } box.onmouseout = function () { arr.style.display = "none"; //鼠標(biāo)離開的時(shí)候，繼續(xù)自動滾動 timer = setInterval(playNext, 1000); } //設(shè)置點(diǎn)擊左右小箭頭的事件且要求小圖標(biāo)要跟著變化 //1.設(shè)置點(diǎn)擊右側(cè)箭頭 var pic = 0;//記錄當(dāng)前為第幾項(xiàng)用 var square = 0;//記錄小圖標(biāo)的索引值 /* right.onclick = function () {//存在的問題是當(dāng)移動到最后一張的時(shí)候，無法跳轉(zhuǎn)到第一張 pic++; var target = -pic * imgWidth; cutton(ul, target, 20); }*/ //方法改進(jìn) /*right.onclick = function () { //先對pic做一個(gè)判斷，當(dāng)pic的值為5的時(shí)候，實(shí)現(xiàn)一個(gè)跳轉(zhuǎn) if (pic == ulLis.length - 1) { ul.style.left = 0; pic = 0; } pic++; var target = -pic * imgWidth; cutton(ul, target, 20); if (square == olLis.length - 1) { square = -1;//下面會加一，就變成了0 } square++; //排他思想 for (var i = 0; i < olLis.length; i++) { olLis[i].className = ""; } olLis[square].className = "current"; }*/ //使用封裝函數(shù) right.onclick = function () { playNext(); } //2.設(shè)置點(diǎn)擊左側(cè)箭頭 left.onclick = function () {//要判斷一下當(dāng)pic為零時(shí)的情況 if (pic == 0) { ul.style.left = -imgWidth * (ulLis.length - 1) + "px";//要記得加單位 pic = ulLis.length - 1;//給pic重新賦一個(gè)值 } pic--; var target = -pic * imgWidth; cutton(ul, target, 20); //設(shè)置小圖標(biāo)樣式 if (square == 0) { square = olLis.length; } square--; for (var i = 0; i < olLis.length; i++) { olLis[i].className = ""; } olLis[square].className = "current"; } //設(shè)置自動滾動 //1.封裝點(diǎn)擊右側(cè)小箭頭事件 function playNext() { //先對pic做一個(gè)判斷，當(dāng)pic的值為5的時(shí)候，實(shí)現(xiàn)一個(gè)跳轉(zhuǎn) if (pic == ulLis.length - 1) { ul.style.left = 0; pic = 0; } pic++; var target = -pic * imgWidth; cutton(ul, target, 20); if (square == olLis.length - 1) { square = -1;//下面會加一，就變成了0 } square++; //排他思想 for (var i = 0; i < olLis.length; i++) { olLis[i].className = ""; } olLis[square].className = "current"; } //2.調(diào)用這個(gè)封裝的函數(shù)，并且設(shè)置一個(gè)間歇性計(jì)時(shí)器 var timer = null; timer = setInterval(playNext, 1000); //封裝函數(shù) function cutton(obj, target, stp) { clearInterval(obj.timer); obj.timer = setInterval(function () { var step = stp; step = obj.offsetLeft > target ? -step : step; if (Math.abs(obj.offsetLeft - target) >= Math.abs(step)) { obj.style.left = obj.offsetLeft + step + "px"; } else { obj.style.left = target + "px"; clearInterval(obj.timer); } }, 15) }</script></body></html>補(bǔ)充：原生javascript實(shí)現(xiàn)banner圖自動輪播切換
一般在做banner輪播圖的時(shí)候都是用jquery，因?yàn)榇a少，方便，不需要花費(fèi)很長的時(shí)間去獲取某個(gè)元素作為變量，然后再進(jìn)行操作，只要一個(gè)$就搞定了。但是今天我用原生的javascript做了一下這個(gè)輪播效果，感覺還行，以下是部分js源代碼，僅供參考！文章底部查看效果演示。
1、鼠標(biāo)離開banner圖，每隔2s切換一次；
2、鼠標(biāo)滑過下方的小按鈕，可以切換圖片；
3、鼠標(biāo)點(diǎn)擊左右按鈕，可以切換圖片。
var oPic,oLi,anniu,aLi,aLength,num,timer,oG,_index,oSpan;window.onload = function(){ oPic = document.getElementsByClassName("pic")[0]; oLi = oPic.getElementsByTagName("li"); anniu = document.getElementsByClassName("anniu")[0]; aLi = anniu.getElementsByTagName("li"); aLength = aLi.length; num = 0; oG = document.getElementsByClassName("g")[0]; oSpan = oG.getElementsByTagName("span"); oLeft = oSpan[0]; oRight = oSpan[1]; start(); oG.onmouseover = end; oG.onmouseout = start; for(var j=0; j<aLength; j++){ aLi[j].index = j; aLi[j].onmouseover = change; } oRight.onclick = time; oLeft.onclick = times;}//自動輪播開始或結(jié)束function start(){ timer = setInterval(time,2000); hide();}function end(){ clearInterval(timer); show();}//圖片切換++function time(){ for(var i=0; i<aLength; i++){ oLi[i].style.display = "none"; aLi[i].className = ""; } num++; num = num % 4; oLi[num].style.display = "block"; aLi[num].className = "on";}//圖片切換--function times(){ for(var i=0; i<aLength; i++){ oLi[i].style.display = "none"; aLi[i].className = ""; } num--; num = (num+4)%4; oLi[num].style.display = "block"; aLi[num].className = "on";}//鼠標(biāo)滑過按鈕，圖片輪播function change(){ _index = this.index; for(var k=0; k<aLength; k++){ aLi[k].className = ""; oLi[k].style.display = "none"; } aLi[_index].className = "on"; oLi[_index].style.display = "block";}//左右按鈕顯示或隱藏function show(){ oSpan[0].style.display = "block"; oSpan[1].style.display = "block";}function hide(){ oSpan[0].style.display = "none"; oSpan[1].style.display = "none";}以上所述是小編給大家介紹的使用原生的javascript來實(shí)現(xiàn)輪播圖，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
