HTML5 切換圖片代碼下載
在現代 Web 開發中，動態切換圖片是非常常見的需求，可以幫助我們實現更多的交互效果。有時，我們需要在選擇器或輪播圖中實現動態切換圖片，常常使用 JavaScript 庫或框架來實現。然而，使用純 HTML 和 CSS 實現也是一種可行的方法。下面是一個使用 HTML5 實現切換圖片的代碼。你可以根據你的需要進行修改和優化。
HTML 代碼：
<html><head><title>切換圖片</title><style>img {
max-width: 100%;
}
img.hide {
display: none;
}
</style></head><body><img src="https://picsum.photos/id/1015/400" alt="第一張圖片"><img src="https://picsum.photos/id/1020/400" alt="第二張圖片" class="hide"><button onclick="showNext()">下一張</body></html>在這段 HTML 代碼中，我們創建了兩張圖片，第二張圖片的 CSS 類為 "hide"，表示它的初始狀態應該是隱藏的。為了使圖片能夠適應不同的屏幕大小，我們使用了 "max-width: 100%;"，可以使圖片的大小適應其所在容器。我們還創建了一個按鈕，并在 onclick 事件中調用了 showNext() 函數。這個函數會找到當前顯示的圖片，并將其隱藏，然后顯示下一張圖片。
JavaScript 代碼：<script>function showNext() {
let img1 = document.querySelector('img:not(.hide)');
let img2 = document.querySelector('img.hide');
img1.classList.add('hide');
img2.classList.remove('hide');
}
</script>在這段 JavaScript 代碼中，我們使用了 document.querySelector() 方法來查找當前顯示的圖片和下一張圖片。我們使用了 ":not(.hide)" 選擇器來避免選擇隱藏的圖片。然后我們將第一張圖片添加 "hide" 類，將第二張圖片移除 "hide" 類，從而實現了圖片的切換。
我們希望這個代碼可以幫助你實現切換圖片的功能。如果你有更好的建議或想法，歡迎留言分享。下一篇文字加滾動條css