我想做一个网页头部的flash图片过渡特效，有什么好方法呢？
1个回答
展开全部
差不多就是这样了。。，你直接复制过去看看，把div2里的图片改成你自己的图片路径
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
html
body
#div1
#div3
</style>
<script type="text/javascript">
var index=0;
function largen(url)
{
var div1=document.getElementById("div1");
var div3=document.getElementById("div3");
var img=document.getElementById("bigimg");
img.src=url;
div1.style.visibility='visible';
div3.style.visibility='visible';
}
function hide()
{
var div1=document.getElementById("div1");
var div3=document.getElementById("div3");
div1.style.visibility='hidden'
div3.style.visibility='hidden';
}
function next()
{
var div2=document.getElementById("div2");
var img=document.getElementById("bigimg");
var images=div2.getElementsByTagName("img");
index++;
if(index<images.length)
img.src=images[index].src;
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2">
<img src="1.jpg" width="100px" height="100px" onclick="largen(this.src)"/>
<img src="2.jpg" width="100px" height="100px" onclick="largen(this.src)"/>
<img src="1.jpg" width="100px" height="100px" onclick="largen(this.src)"/>
</div>
<div id="div3" style="text-align:center">
<a href="#" onclick="next()">下一张</a><br />
<img src="#" id="bigimg" width="500px" height="500px"/><br>
<a href="#" onclick="hide()">退出</a>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
html
body
#div1
#div3
</style>
<script type="text/javascript">
var index=0;
function largen(url)
{
var div1=document.getElementById("div1");
var div3=document.getElementById("div3");
var img=document.getElementById("bigimg");
img.src=url;
div1.style.visibility='visible';
div3.style.visibility='visible';
}
function hide()
{
var div1=document.getElementById("div1");
var div3=document.getElementById("div3");
div1.style.visibility='hidden'
div3.style.visibility='hidden';
}
function next()
{
var div2=document.getElementById("div2");
var img=document.getElementById("bigimg");
var images=div2.getElementsByTagName("img");
index++;
if(index<images.length)
img.src=images[index].src;
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2">
<img src="1.jpg" width="100px" height="100px" onclick="largen(this.src)"/>
<img src="2.jpg" width="100px" height="100px" onclick="largen(this.src)"/>
<img src="1.jpg" width="100px" height="100px" onclick="largen(this.src)"/>
</div>
<div id="div3" style="text-align:center">
<a href="#" onclick="next()">下一张</a><br />
<img src="#" id="bigimg" width="500px" height="500px"/><br>
<a href="#" onclick="hide()">退出</a>
</div>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
