在网页中我们经常会见到各式各样美观的轮播图效果，如何用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>