HTML 下拉顯示圖片代碼 當我們需要顯示多張圖片時，常常會使用下拉菜單的方式來方便用戶選擇查看。這種效果最常見的實現方式是通過 HTML 的 select 標簽和 JavaScript 來實現。接下來我們將介紹一種簡單的方式來實現下拉顯示圖片的代碼。 首先，我們需要將所需要顯示的圖片的路徑存儲進一個數組中，如下所示：

var imgList = [
'image1.jpg',
'image2.jpg',
'image3.jpg',
'image4.jpg'
];

然后，在 HTML 中添加一個 select 標簽和一個 img 標簽，如下所示：

圖片1圖片2圖片3圖片4

在這個例子中，我們定義了一個 select 標簽，并設置了 onchange 屬性，當用戶選擇不同的圖片時，會觸發該屬性所綁定的函數 changeImage()。同時，我們還添加了一個 img 標簽，其 src 屬性為空，因為我們需要通過 JavaScript 動態地改變它的值。 下面是我們應該添加的 JavaScript 代碼：

function changeImage() {
var index = document.getElementById("imgSelect").value;
var img = document.getElementById("image");
img.src = imgList[index];
}

這段代碼定義了一個函數 changeImage()，它首先獲取了用戶選擇的圖片的索引，然后使用該索引從數組中獲取相應的圖片路徑，并將其設置為 img 標簽的 src 屬性，從而實現了下拉顯示圖片效果。 最后，這里是完整的 HTML 代碼：

圖片1圖片2圖片3圖片4

希望這篇文章能夠幫到需要實現下拉顯示圖片效果的同學們。