HTML簡單輪播代碼
<!DOCTYPE html>
<html>
<head>
<title>HTML簡單輪播</title>
<style>
.banner {
width: 100%;
height: 350px;
overflow: hidden;
position: relative;
}
.banner img {
width: 100%;
height: 350px;
display: none;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="banner">
<img src="img/1.jpg" alt="圖片1">
<img src="img/2.jpg" alt="圖片2">
<img src="img/3.jpg" alt="圖片3">
<img src="img/4.jpg" alt="圖片4">
<img src="img/5.jpg" alt="圖片5">
</div>
<script>
var i = 0;
var time = setInterval(function () {
i++;
if (i > 4) {
i = 0;
}
var lis = document.querySelectorAll('.banner img');
for (var j = 0; j < lis.length; j++) {
lis[j].style.display = "none";
}
lis[i].style.display = "block";
}, 2000);
</script>
</body>
</html>該代碼實現了基本的輪播效果，首先是用div包裹了一組img標簽，img標簽中的src屬性為圖片的地址，并且設置了display:none來隱藏圖片。然后使用JS設置了一個定時器，每隔2秒鐘輪播一張圖片，具體實現方法是通過改變style.display屬性來實現隱藏與顯示。這是一個非常簡單的輪播效果，可以根據實際需求進行更多的樣式設計與功能擴展。