.className = “”、.className = "haveBorder”、setTimeout("loadimages()",1000)、.onmouseover、clearTimeout(theTime)、.onmouseout
<!DOCTYPE html>
<html lang="zh" id="htmlId">
<head id="headId">
<title>BOM基础</title>
<meta charset="utf-8">
<meta name="keywords" content=",,">
<meta name="description" content="">
<style>
.haveBorder{
border: 1px solid black;
background-color: aqua;
width: 10px;
height: 10px;
}
#theLabelsDivId{
position: relative;
top: 0px;
}
label{
margin-left: 20px;
}
</style>
</head>
<script type="text/javascript">
var landscapes = ["landscape1.jpg","landscape2.jpg","landscape3.jpg","landscape4.jpg","landscape5.jpg","landscape6.jpg"];
var theTime;
var n=0;
function loadimages(){
var index = 0;
if(n==0)
{
index = landscapes.length-1;
}else{
index = n-1;
}
var labelpre = document.getElementById("label"+(index+1));
labelpre.className = "";
var theImg = document.getElementById("specificeImg");
theImg.src = landscapes[n];
var thislabel = document.getElementById("label"+(n+1));
thislabel.className = "haveBorder";
n=n+1;
if(n==landscapes.length)
{
n=0;
}
theTime=setTimeout("loadimages()",1000);
}
function loadThelabelsUnderimages()
{
var lbls = document.getElementsByTagName("label");
for(var i=0;i<lbls.length;i++)
{
lbls[i].onmouseover = function(){
//先停止setTimeout
clearTimeout(theTime);
//显示相应的图片
var theImg = document.getElementById("specificeImg");
theImg.src = landscapes[this.innerText*1-1];
for(var i=0;i<lbls.length;i++){
lbls[i].className = "";
}
this.className = "haveBorder";
}
lbls[i].onmouseout = function(){
// 离开标签后,将显示下一个图片。
n = this.innerText*1;
theTime = setTimeout("loadimages()",1000);
}
}
}
</script>
<body οnlοad="loadimages(),loadThelabelsUnderimages()" id="bodyId">
<div align = "center">
<img src="dragon.png" id = "specificeImg" width="400px" height="300px">
<div id="theLabelsDivId">
<label id="label1">1</label>
<label id="label2">2</label>
<label id="label3">3</label>
<label id="label4">4</label>
<label id="label5">5</label>
<label id="label6">6</label>
</div>
</div>
</body>
</html>