如何用js做簡單的輪播圖
在網頁中我們經常會見到各式各樣美觀的輪播圖效果，如何用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>