HTML中如何設置圖片隨機切換？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圖片隨機切換</title>
<style>
#img-container {
width: 400px;
height: 400px;
position: relative;
}
#img-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
</style>
</head>
<body>
<div id="img-container">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</div>
<script>
var imgs = document.getElementById("img-container").getElementsByTagName("img");
var currentIndex = 0;
var timer = setInterval(function() {
var lastIndex = currentIndex;
currentIndex = Math.floor(Math.random() * imgs.length);
imgs[lastIndex].style.display = "none";
imgs[currentIndex].style.display = "block";
}, 2000);
</script>
</body>
</html>上述代碼中，我們通過設置圖片容器的位置為相對定位，在其中放入多張圖片，并設置它們的位置為絕對定位。接著，我們使用JavaScript實現(xiàn)定時隨機切換圖片的功能。在代碼中，我們首先獲取到圖片容器中的所有圖片元素，然后設置一個當前圖片的索引值，將它的初始值設為0。
接下來我們使用setInterval()函數(shù)，將圖片的切換操作放在定時器中，每隔2秒鐘執(zhí)行一次。在函數(shù)中，定義一個lastIndex變量保存上一次切換的圖片位置，然后將currentIndex設置為一個0到imgs.length-1之間的隨機數(shù)，實現(xiàn)圖片位置的隨機變換。
最后，我們將當前圖片索引對應的圖片設置為顯示狀態(tài)，上一次的圖片設置為隱藏狀態(tài)，即可完成圖片的隨機切換效果。