我见过一种自动改变图片的特效,请问怎么实现?

fengqingyundan 2002-07-19 10:41:10
我想做个图片浏览的页面,我希望点一个按钮,然后就会自动更换图片,请问怎么做?谢谢!
...全文
42 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
刘爱贵 2002-07-20
  • 打赏
  • 举报
回复
做两个图片,开始显示一个图片,在动作ONCLICK 时把图片的SRC换为另一图片即可!
<script language=javascript>
function Changeimage()
{
top.document.image.src="image2.gif"
return()
}
</script>
<img src="image1.gif" name=image onclick="ChangeImage()">
刘爱贵 2002-07-20
  • 打赏
  • 举报
回复
做两个图片,开始显示一个图片,在动作ONCLICK
coffee_cn 2002-07-20
  • 打赏
  • 举报
回复
先把图片的路径放到一个数组中,然后点击按钮的时候,
llrock 2002-07-19
  • 打赏
  • 举报
回复
试试这个,建议变换时使用滤镜
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
<!--
.text{font-family:Verdana;font-size:18px;color:#fffff0}
#x a:link{font-family:Verdana;font-size:18px;color:#fffff0;text-decoration:none}
#y a:visited{font-family:Verdana;font-size:18px;color:#fffff0;text-decoration:none}
#z a:hover{font-family:Verdana;font-size:18px;color:#00ff00;text-decoration:none}
//-->
</style>
<script language="JavaScript">
<!--
intro=new Image();
intro.src='c.gif'; //默认得图片!
pics=new Array('a.gif','b.gif','c.gif') //可以放任意个图片,
speed=1000; //变幻的速度,单位时毫秒

load=new Array();
for(i=0; i < pics.length; i++)
{
load[i]=new Image();
load[i].src=pics[i];
}
ns=(document.layers);
n6=(document.getElementById&&!document.all);
ie=(document.all);
count=-1;
move=1;
chck=null;
timer=null;
vvv='0';
function Picnum(){
var d=(ns||ie)?'document.':'document.getElementById("';
var a=(ns||n6)?'':'all.';
var n6r=(n6)?'")':'';
var p=eval(d+a+'Nums'+n6r);
if (ie||n6)
p.innerHTML='Picture '+count;
if (ns){
p.document.write("<div style='position:absolute;top:0px;left:0px;font-family:Verdana;font-size:18px;color:#fffff0;text-align:center'>Picture "+count+"</div>");
p.document.close();
}
}
function ManualForward(){
if (chck==1){
count+=move
if (count >= pics.length) count=0;
document.images.slides.src=pics[count];
Picnum();
}
}
function ManualReverse(){
if (chck==1){
count-=move
if (count < 0) count=pics.length-1;
document.images.slides.src=pics[count];
Picnum();
}
}
function Pause(){
chck=1;
count=count;
clearTimeout(timer)
Picnum();
}
function AutoCycle(){
count+=move
if (count >= pics.length) count=0;
document.images.slides.src=pics[count];
Picnum();
timer=setTimeout('AutoCycle()',speed)
}
function Cycle(){
if (chck==1) AutoCycle();
chck=null;
}
//-->
</script></HEAD>

<BODY bgcolor=000000 onLoad="setTimeout('AutoCycle()',3000)">
<center>
<table width="250" border="0" cellpadding="0" cellspacing="4">
<tr>
<td valign="middle" align="center" bgcolor="#c0c0c0">
<span class="text" style="position:relative">Slide Show</span>
<br>
<span id="Nums" class="text" style="position:relative"> </span>
</td>
</tr>
<tr>
<td height="250" valign="middle" align="center"> <img src="a.gif" name="slides" width="189" height="189">
</td>
</tr>
<tr>
<td height="40" valign="middle" align="center" bgcolor="#c0c0c0">
<span id="x"><span id="y"><span id="z">
<a href="javascript:ManualReverse()"> << </a>
<a href="javascript:Pause()">暂停</a>
<a href="javascript:ManualForward()"> >> </a>
<a href="javascript:Cycle()">自动</a>
</span></span></span>
</td>
</tr>
</table>
</center>

</BODY>
</HTML>

87,996

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧