在網頁中我們經常會見到各式各樣美觀的輪播圖效果，如何用JS的DOM操作來實現輪播圖效果？
新建一個HTML文件，並准備幾張圖片作為輪播圖
頁面中有4項內容：輪播圖，兩個按鈕“上一張“下一站張””，縮略圖
功能：點擊“上一張”或“下一張”可以切換當前輪播圖的圖片，
鼠標懸停在輪播圖上回停止輪播，移開后輪播繼續進行
輪播圖切換的同時，縮略圖也同時切換，並伴隨邊框的樣式變化，具體代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script>
//定義全局變量
var imgDom =null;
var n=0;
var intervalDom=null;
var tt=2000;
var imgs=null;
var imgArr=["imgs/1.jpg","imgs/2.jpg","imgs/3.jpg","imgs/4.jpg","imgs/5.jpg","imgs/6.jpg"]
//頁面加載完后執行
window.onload= function(){//初始化變量
imgDom=document.getElementsByTagName("img")[0];
imgs=document.getElementsByClassName("imgs");
intervalDom=setInterval(next,tt);
}
function next(){ //點擊下一頁事件
n++;
if(n>=imgArr.length){
n=0;
}
imgDom.setAttribute("src",imgArr[n]);
addBorder();
}
function shang(){ //點擊上一頁事件
n--;
if(n<0){
n=imgArr.length-1;
}
imgDom.setAttribute("src",imgArr[n]);
addBorder();
}
function stop(){ //鼠標移上停止輪播
clearInterval(intervalDom);
}
function start(){ //鼠標移開繼續輪播
intervalDom=setInterval(next,tt);
}
function addBorder(){ //輪播時同時改變圖片對應縮略圖的樣式
for(var i=0;i<imgs.length;i++){
imgs[i].style.border=""; //其他圖片樣式為空
}
imgs[n].style.border="1px solid red"; //對應縮略圖樣式改變
}
function change(obj,num) { //點擊縮略圖跳轉到點擊的圖片,並改變此縮略圖的樣式
for(var k=0;k<imgs.length;k++){
imgs[k].style.border=""; //其他圖片樣式為空
}
obj.style.border="1px solid red"; //改變本縮略圖樣式
n=num;
imgDom.setAttribute("src",imgArr[n]); //改變圖片
}
</script>
</head>
<body>
<button onClick="shang()">上一張</button>
<div>
<img src="imgs/1.jpg" alt="" onMouseOver="stop()" onMouseOut="start()" width="300">
</div>
<button onClick="next()">下一張</button>
<div>
<img src="imgs/1.jpg" onClick="change(this,0)" class="imgs" width="50">
<img src="imgs/2.jpg" onClick="change(this,1)" class="imgs" width="50">
<img src="imgs/3.jpg" onClick="change(this,2)" class="imgs" width="50">
<img src="imgs/4.jpg" onClick="change(this,3)" class="imgs" width="50">
<img src="imgs/5.jpg" onClick="change(this,4)" class="imgs" width="50">
<img src="imgs/6.jpg" onClick="change(this,5)" class="imgs" width="50">
<img src="imgs/7.jpg" onClick="change(this,6)" class="imgs" width="50">
</div>
</body>
</html>