< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<style type="text/css">
body > div > img {
position:absolute;
display:none;
}
body > div > div > img {
width: 15px;
height: 15px;
border: 1px solid;
cursor: pointer;
}
#div {
border:1px solid;
width:320px;
height:320px;
}
</style>
<script type="text/javascript">
onload = function(){
/*
* 层叠图片,图片切换效果*/
var id = setInterval(changeImg, 1000);
var div = document.getElementById("div");
div.onmouseover = function(){
clearInterval(id);
id = null;
}
div.onmouseout = function(){
if(id == null) // 为了避免在没有经过onmouseover事件的时候先进入onmouseout, 这样会开启2个计时器
id = setInterval(changeImg, 1000);
}
}
//获取所有图片,将所有隐藏
//显示其中一个
var times = 0;
function changeImg(){
var imagesArr = document.images;
for(var x = 0; x < 4; x++)
imagesArr[x].style.display = "none";
imagesArr[++times % 4].style.display = "block";
}
function showImg(index){
var imgArr = document.images;
for (var x = 0; x < 4; x++)
imgArr[x].style.display = "none";
imgArr[index].style.display = "block";
}
</script>
</head>
<body>
<div id="div">
<img src="../img/唐笑.jpg" style="display:block">
<img src="../img/杜德伟.jpg">
<img src="../img/林俊杰.jpg">
<img src="../img/萧亚轩.jpg">
<div style=" position:absolute; z-index:1; margin-left:210px; margin-top:290px" >
<img src="../img/1.JPG" οnclick="showImg(0)">
<img src="../img/2.JPG" οnclick="showImg(1)">
<img src="../img/3.JPG" οnclick="showImg(2)">
<img src="../img/4.JPG" οnclick="showImg(3)">
</div>
</div>
</body>
</html>
层叠图片,图片切换效果
最新推荐文章于 2023-02-23 09:23:26 发布