本文实例为大家分享了javascript实现点击小图显示大图的具体代码，供大家参考，具体内容如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { font-family: "Helvetica", "Arial", serif; color: #333; background-color: #ccc; margin: 1em 10%; } h1 { color: #333; background-color: transparent; } a { color: #c60; background-color: transparent; font-weight: bold; text-decoration: none; } ul { padding: 0; } li { float: left; padding: 1em; list-style: none; } #imagegallery { list-style: none; } #imagegallery li { margin: 0px 20px 20px 0px; padding: 0px; display: inline; } #imagegallery li a img { border: 0; } </style></head><body><h2> 美女画廊</h2><ul id="imagegallery"> <li> <a href="images/1.jpg" rel="external nofollow" title="美女A"> <img src="images/1-small.jpg" width="100" alt="美女1"/> </a> </li> <li><a href="images/2.jpg" rel="external nofollow" title="美女B"> <img src="images/2-small.jpg" width="100" alt="美女2"/> </a></li> <li><a href="images/3.jpg" rel="external nofollow" title="美女C"> <img src="images/3-small.jpg" width="100" alt="美女3"/> </a></li> <li><a href="images/4.jpg" rel="external nofollow" title="美女D"> <img src="images/4-small.jpg" width="100" alt="美女4"/> </a></li></ul><div style="clear:both"></div><!--显示大图的--><img id="image" src="images/placeholder.png" alt="" width="450"/><p id="des">选择一个图片</p><script> // 获取ul元素对象 var imagegallery = document.getElementById("imagegallery") // 获取a元素 数组 var a = imagegallery.getElementsByTagName("a") // 获取大图元素对象 var image = document.getElementById("image") // 获取p标签 var des = document.getElementById("des") // console.log(imagegallery,a) // 遍历数组元素为每一个a链接注册点击事件 for(var i = 0; i < a.length; i++){ a[i].onclick = function(){ // 将a链接中的href中的值赋值给大图的src属性 image.src = this.href // 将a链接中的title的值作为内容赋值给p标签 des.innerHTML = this.title return false } } //点击a标签,把a标签中的href的属性值给id为image的src属性 //把a的title属性的值给id为des的p标签赋值 //阻止超链接默认的跳转 // return false;</script></body></html> |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/weixin_47591145/article/details/110223144
