JavaScript 实现的图片切换1

最新推荐文章于 2022-08-15 20:44:53 发布

keepupdreaming

最新推荐文章于 2022-08-15 20:44:53 发布

阅读量319

点赞数

分类专栏： JavaScript HTML

本文链接：https://blog.csdn.net/keepupdreaming/article/details/8186176

版权

JavaScript 同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

HTML

30 篇文章 0 订阅

订阅专栏

JavaScript 实现的图片切换

思路：根据图片的id，获得小图的src，设置大图显示的src。

图片自己添加，熟悉document.getElementById的使用方法，代码如下：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>根据id实现图片切换</title>

<script type="text/javascript">

function img(num){
	//第一种方法：
	//var img_id = "s"+num;
	//document.getElementById("box").src = document.getElementById(img_id).src;
	//第二种方法：
	var img_src = "images/"+num+".jpg";
	document.getElementById("box").src = img_src;
}
</script>
</head>

<body οnlοad="init()">
<table width="714" height="410" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td width="186" height="129"  ><img src="images/1.jpg" width="186" height="139" class="img" id="s1" οnclick="img(1)" /></td>
    <td width="528" rowspan="3"><img src="images/1.jpg" width="519" height="410" id="box"; /></td>
  </tr>
  <tr>
    <td  width="186" height="129"><img src="images/2.jpg"  width="186" height="129"  class="img" id="s2" οnclick="img(2)" /></td>
  </tr>
  <tr>
    <td  width="186" height="129"><img src="images/3.jpg"  width="186" height="129"  class="img" id="s3" οnclick="img(3)" /></td>
  </tr>
</table>

</body>
</html>