改变网页内图片的两种做法

来源：互联网发布：链轮自动计算软件编辑：程序博客网时间：2024/04/29 10:39

第一种做法：

<!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><script type="text/javascript">window.onload=function() {var aa=document.getElementById("my_click");var bb=document.getElementById("my_+img");var n=1;my_click.onclick=function(){if(n<4){n++my_img.src="images/"+n+".jpg";}else{alert("已经是最后一张了！");}}}</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><img src="images/1.jpg" width="500" height="400" alt="图片" id="my_img" /> <br/><a href="javascript:" id="my_click">点击查看下一张图片</a></body></html>

第二种做法：

<!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><script  type="text/javascript">var n=1;function aa(){if(n<4){n=n+1;document.getElementById("my_img").src="images/"+n+".jpg";}else{alert("已经是最后一页了");}}</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title></head><body><img id="my_img" src="images/1.jpg" width="500" height="400" alt="图片"/><br/><a href="javascript:" onclick="aa()" >点击显示下一个图片</a></body></html>