本文實例為大家分享了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
