使用方法：
可能很多人對輪播圖感興趣，下面奉上本人的 原生 js 輪播代碼
復制 js 到頁面的最底部，樣式在 css 里改，js 基本不用動，這個是用 原生寫的 輪播圖，樣式可以寫自己喜歡的樣式，什么都不用改，只改變樣式就行，頁面結構的id 要與js的相對應li隨便加。li 隨便加的意思就是說你可以加無數個圖片。每個li 里裝一個圖片，或者是其他什么元素，
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{padding:0;margin:0;} #parent{ width:50%; height:200px; border:1px solid red; margin:0 auto; } #imgBox{ width:500px; height:200px; position:relative;/*必須有===*/ overflow:hidden;/*必須有===*/ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } ul{ /*動畫就是改變ul的left值的效果，所以一定要有定位*/ position:absolute;/*必須有*/ left:0;/*必須有*/ } li{list-style: none;/*必須有*/ height:200px;/*必須有*/ width:500px;/*必須有*/ float:left;/*必須有*/ } .span{ display:inline-block; width:20px; height:20px; line-height:20px; text-align: center; border-radius:50%; color:white; } </style> </head> <body> <div id="parent"> <div id="imgBox"> <ul id='ul'> <li style='background:red;'>第一個</li> <li style='background:yellow;'>第二個</li> <li style='background:pink;'>第三個</li> <li style='background:green;'>第四個</li> <li style='background:blue;'>第五個</li> <li style='background:blue;'>第6個</li> <li style='background:green;'>第7個</li> <li style='background:blue;'>第8個</li> <li style='background:green;'>第9個</li> <li style='background:blue;'>第10個</li> </ul> </div> <a href="#" id="prev">向左</a> <a href="#" id="next">向右</a> <!-- 放小圓點的盒子--> <div id="arcBox"> <!-- 小圓點的位置 --> </div> </div> <script> var chefElement = { bgColor1:'#cccccc',//小圓點的背景顏色 bgColor2:'red',//獲得焦點的小圓點的背景顏色 animationSpeed:1, //每多少毫秒移動一次 minSpeed:5,//每次移動的距離 stopTime:5000, //動畫停留的時間，毫秒為單位 包含移動所花費的時間 //獲取頁面元素 prev:document.getElementById('prev'), next:document.getElementById('next'), parent:document.getElementById('parent'), ul:document.getElementById('ul'), li:document.getElementById('ul').getElementsByTagName('li'), arc:document.getElementById("arcBox"), liWidth:document.getElementById('ul').getElementsByTagName('li')[0].offsetWidth, type:true, nextTimer:null, prevTimer:null, parent_n:null }; //初始化小圓點/指定放圖片的盒子 ul 的寬度 var elemSpan = (function(){ chefElement.ul.style.width = chefElement.liWidth*chefElement.li.length+'px'; for(var i = 0;i<chefElement.li.length;i++){ chefElement.li[i].index = i; var span = document.createElement('span'); span.className = 'span'; span.index = i; span.style.background = chefElement.bgColor1; span.innerHTML = i+1; chefElement.arc.appendChild(span); } var objSpan = chefElement.arc.getElementsByTagName('span'); //創建完以后第一個小圓點顯示指定的顏色 objSpan[0].style.background = chefElement.bgColor2; return objSpan; })(); //給每個小圓點添加事件 chefElement.arc.onmouseover = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == "span"){ if(chefElement.type){ showImg(target.index); changeBackgroundColor(target) chefElement.type = true; } } } //改變小圓點的背景顏色 function changeBackgroundColor(obj){ for(var i = 0;i<elemSpan.length;i++){ elemSpan[i].style.background = chefElement.bgColor1; } elemSpan[obj.index].style.background = chefElement.bgColor2; } //根據參數顯示對應的圖片。 function showImg(inde){ var this_li = chefElement.li[0].index; //把第一個元素放到最后面。 if(inde>this_li){ var x = inde-this_li; for(var y = 0;y<x;y++){ chefElement.ul.appendChild(chefElement.li[0]); } } //把最后一個元素放到第一的位置 if(inde<this_li){ var x_x = this_li-inde; for(var g = 0;g<x_x;g++){ chefElement.ul.insertBefore(chefElement.li[chefElement.li.length-1],chefElement.li[0]); } } } chefElement.prev.onclick = function(){ if(chefElement.type){ clearInterval(chefElement.prevTimer); chefElement.ul.insertBefore(chefElement.li[chefElement.li.length-1],chefElement.li[0]); chefElement.liWidth = chefElement.li[0].offsetWidth; chefElement.ul.style.left = '-'+chefElement.liWidth+'px'; chefElement.prevTimer = setInterval(pre,chefElement.animationSpeed); chefElement.type = false; changeBackgroundColor(chefElement.li[0]); } }; next.onclick = function(){ if(chefElement.type){ chefElement.liWidth = 0; clearInterval(chefElement.nextTimer); chefElement.nextTimer = setInterval(nex,chefElement.animationSpeed); chefElement.type = false; changeBackgroundColor(chefElement.li[1]); } }; //next動畫函數 function nex(){ chefElement.ul.style.left = '-'+chefElement.liWidth+ 'px'; chefElement.liWidth += chefElement.minSpeed ; if(chefElement.liWidth >= chefElement.li[0].offsetWidth){ clearInterval(chefElement.nextTimer); chefElement.ul.appendChild(chefElement.li[0]); chefElement.ul.style.left = 0; chefElement.type = true; } } //prev動畫函數 function pre(){ chefElement.ul.style.left = '-'+chefElement.liWidth+'px'; chefElement.liWidth -= chefElement.minSpeed ; if(chefElement.liWidth <= -1){ chefElement.ul.style.left = 0; clearInterval(chefElement.prevTimer); chefElement.type = true; } } chefElement.parent.onmouseover = function(){ clearInterval(chefElement.parent_n); }; chefElement.parent.onmouseout = function(){ chefElement.parent_n = setInterval(next.onclick,chefElement.stopTime); }; //動畫播放 chefElement.parent_n = setInterval(next.onclick,chefElement.stopTime); </script> </body> </html>