懸停時如何讓我的 img src 在 3-4 張圖像之間不斷變化？

Question

我目前正在為一個服裝網站做一個大學項目，所以我想要的是當用戶將鼠標懸停在主提要上的產品圖片上時，產品圖片會在該產品的 3-4 張圖片之間不斷變化，幾毫秒過渡。

這是我的 HTML 代碼

<div class="imagebox">
                <a href="#"><img src="../img/Mom Sarees/5pcs/A93A5321.JPG" alt="Saree no: A93A5321 "></a>
            </div>

這是 CSS

.imagebox{
display: inline-block;}

.imagebox img{
margin-top: 20px;
height: 400px;
margin-right: 10px;}

有沒有辦法使用 CSS 或 JS 來做到這一點？

Answer 1

我已經通過 JS 實現了一個示例，希望對您有所幫助。

 const poroduct = document.getElementById('pr'); const productImages = poroduct.querySelectorAll('img'); let intervalId; let i = 0; poroduct.addEventListener('mouseenter', function() { fadeImg(); intervalId = setInterval(fadeImg, 1500) }); poroduct.addEventListener('mouseleave', function() { clearInterval(intervalId); productImages[i].classList.remove('active'); productImages[0].classList.add('active'); i = 0; }); function fadeImg() { productImages[i].classList.remove('active'); i = (i + 1) % 4; productImages[i].classList.add('active'); }

 .imagebox img { height: 200px; width: 350px; position: absolute; opacity: 0; transition: opacity 500ms; }.imagebox img.active { opacity: 1; }

 <div class="imagebox"> <a href="#" id="pr"> <img class="active" src="https://fakeimg.pl/350x200/550000/?text=Image1"> <img src="https://fakeimg.pl/350x200/005500/?text=Image2"> <img src="https://fakeimg.pl/350x200/000055/?text=Image3"> <img src="https://fakeimg.pl/350x200/005555/?text=Image4"> </a> </div>