层叠图片,图片切换效果

2014-11-24 07:29:11 · 作者: · 浏览: 0

< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>


Insert title here

<script type="text/java script">
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";
}

















摘自 代俊建的专栏