以下是一種實現圖片自動循環滾動的HTML代碼:
<!DOCTYPE html>
<html>
<head>
<style>
.carousel {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.carousel img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
animation: carousel-animation 10s infinite;
}
@keyframes carousel-animation {
0% {left: 0;}
25% {left: -100%;}
50% {left: -200%;}
75% {left: -300%;}
100% {left: -400%;}
}
</style>
</head>
<body>
<div class="carousel">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
</div>
</body>
</html>
在上述代碼中,.carousel
類設置了輪播容器的寬度、高度和溢出隱藏屬性。每個圖片都被設置為絕對定位,并通過 animation
屬性來應用循環滾動的動畫。 @keyframes
定義了圖片在動畫中的位置變化。每個逐幀動畫的時間間隔為 10 秒,可以根據需要進行調整。
你需要將 img
標簽中的 src
屬性替換為你實際使用的圖片路徑。