javaScript--05 DOM基础 12.3

来源：互联网发布：可以证件照软件编辑：程序博客网时间：2024/04/30 15:49

.className = “”、.className = "haveBorder”、setTimeout("loadimages()",1000)、.onmouseover、clearTimeout(theTime)、.onmouseout

<!DOCTYPE html>

<title>BOM基础</title>

<style>

.haveBorder{

border: 1px solid black;

background-color: aqua;

width: 10px;

height: 10px;

}

#theLabelsDivId{

position: relative;

top: 0px;

}

label{

margin-left: 20px;

}

</style>

</head>

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>

</div>

</body>

</html>

0 0