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

最新推荐文章于 2022-01-10 12:23:41 发布

恼火的昵称

最新推荐文章于 2022-01-10 12:23:41 发布

阅读量810

点赞数

分类专栏： Javascript 文章标签： xhtml javascript function html 文档

本文链接：https://blog.csdn.net/chenglidian/article/details/6881428

版权

Javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

第一种做法：

<!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.οnlοad=function() {
		var aa=document.getElementById("my_click");
		var bb=document.getElementById("my_+img");
		var n=1;
		my_click.οnclick=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:" οnclick="aa()" >点击显示下一个图片</a>
</body>
</html>