HTML5圖片輪播是現(xiàn)代網(wǎng)站展示圖片的一種高效簡單的方式。下面是一段HTML5圖片輪播的簡單代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片輪播</title>
<style>
.slideshow{
width: 100%;
height: 300px;
position: relative;
}
.slideshow img{
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slideshow img.active{
opacity: 1;
}
</style>
</head>
<body>
<div class="slideshow">
<img src="image1.jpg" class="active">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
<img src="image5.jpg">
</div>
<script>
var images = document.querySelectorAll('.slideshow img');
var currentIndex = 0;
var interval = setInterval(nextImage, 2000);
function nextImage(){
images[currentIndex].classList.remove('active');
currentIndex++;
if(currentIndex === images.length){
currentIndex = 0;
}
images[currentIndex].classList.add('active');
}
</script>
</body>
</html>在這個代碼中，我們首先定義了一個類名為“slideshow”的div，其中包含了5張圖片，第一張圖片使用了類名“active”，表示這是默認激活的圖片。我們接著定義了樣式，將圖片的寬度設為100%，高度設為自適應，將圖片的定位設為絕對定位，然后設置一些過渡動畫效果。
接下來我們使用JavaScript實現(xiàn)圖片輪播的效果。我們使用了一個變量“currentIndex”表示當前激活的圖片的下標。我們使用了setInterval函數(shù)定時調(diào)用nextImage函數(shù)，該函數(shù)在每次調(diào)用時將當前激活的圖片取消激活，并將下一張圖片設為激活狀態(tài)。
這個HTML5圖片輪播的代碼非常簡單易懂，可以快速地為現(xiàn)代網(wǎng)站添加圖片展示的功能。
下一篇mysql8.0.22