<!DOCTYPE html>
<html>
<head>
<title>exchangePic.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
ul{
list-style:none;
position:absolute;
left:580px;
top:260px;
}
li{
border:1px solid black;
width:20px;
background:white;
text-align:center;
float:left;
}
</style>
<script type="text/javascript">
var a = ["img/1.jpg","img/2.jpg","img/3.jpg"];
var index=0;
function exchangePic(){
if(index < a.length-1){
index++;
}else{
index = 0;
}
var img = document.getElementById("img");
img.src=a[index];
}
//setInterval("exchangePic()",1000);
function moveon(obj){
index = obj.value;
document.getElementById("img").src = a[index-1];
obj.style.background = "gray";
clearInterval(inter);
}
function moveout(obj){
obj.style.background = "white";
inter = setInterval("exchangePic()",3000);
}
</script>
</head>
<body>
<img style="width:500px; height:300px;margin-left:400px" src="img/1.jpg" id="img" >
<ul>
<li value="1" onmouseover="moveon(this)" onmouseout="moveout(this)">1</li>
<li value="2" onmouseover="moveon(this)" onmouseout="moveout(this)">2</li>
<li value="3" onmouseover="moveon(this)" onmouseout="moveout(this)">3</li>
</ul>
</body>
</html>
基于数组的实现网页中的页面切换效果
最新推荐文章于 2023-10-12 10:36:28 发布