您的位置：首页 > Web前端 > JavaScript

一个实现图片切换的js代码

2008-07-15 13:07 686 查看

学习js-----运行时在其同目录下还得有一个文件夹imgs其中包含三张图片1.jpg 2.jpg 3.jpg

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JS实现图片转换</title>
<style>
.filter
{
border:0px;
filter:revealTrans(transition = 12,duration =2);
}
</style>
<script language ="javascript">
var ctrlPtr;
var i;
var myArray =new Array();

window.onload = function()
{
i=1;
myArray = [CreateImg("imgs/1.jpg"),CreateImg("imgs/2.jpg"),CreateImg("imgs/3.jpg")];
SetImage();
}
function CreateImg(imgSrc)
{
var img = new Image;
img.src = imgSrc;
return img;

}
function SetImage()
{
if(document.getElementById ("myImg"))
{
var myImg = document.getElementById ("myImg");
myImg.filters[0].apply();
myImg.src = myArray[i-1].src;//注意要把图片变换放到apply之后,play之前
myImg.filters[0].play();

if(3==i)
{
i=1;
}
i++;
}
ctrlPtr= setTimeout("SetImage()",4000);
}
function stop()
{
clearTimeout(ctrlPtr);
}
function begin()
{
i=1;
SetImage();
}
</script>
</head>
<body>
<img id ="myImg" src ="#" border ="0px" width ="100px" height ="100px" class ="filter"/><br />
<button id="btn" onclick ="stop()" >停止</button>
<button id ="btnBegin" onclick ="begin()">开始</button>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航