懸停時如何讓我的imgsrc在3-4個影像之間不斷變化？-有解無憂

我目前正在為一個服裝網站做一個大學專案，所以我想要的是當用戶將滑鼠懸停在主提要上的產品圖片上時，產品圖片會在該產品的 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 來做到這一點？

uj5u.com熱心網友回復：

我已經通過 JS 實作了一個例子，我希望這會有所幫助。

let intervalId;
let i = 0;

document.querySelectorAll('.product-images').forEach((poroduct) => {
  const productImages = poroduct.querySelectorAll('img');

  poroduct.addEventListener('mouseenter', function() {
    fadeImg(productImages);
    intervalId = setInterval(() => fadeImg(productImages), 1500);
  });

  poroduct.addEventListener('mouseleave', function() {
    clearInterval(intervalId);
    productImages[i].classList.remove('active');
    productImages[0].classList.add('active');
    i = 0;
  });
});

function fadeImg(productImages) {
  productImages[i].classList.remove('active');
  i = (i   1) % 4;
  productImages[i].classList.add('active');
}

.container {
  display: flex;
}

.imagebox {
  position: relative;
  flex: 1;
  margin: 15px;
}

.imagebox img {
  max-height: 200px;
  max-width: 100%;
  position: absolute;
  opacity: 0;
  transition: opacity 500ms;
}

.imagebox img.active {
  opacity: 1;
}

<div class="container">
  <div class="imagebox">
    <a href="#" class="product-images">
      <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>

  <div class="imagebox">
    <a href="#" class="product-images">
      <img class="active" src="https://fakeimg.pl/350x200/000000/?text=Image1" />
      <img src="https://fakeimg.pl/350x200/faaa22/?text=Image2" />
      <img src="https://fakeimg.pl/350x200/885500/?text=Image3" />
      <img src="https://fakeimg.pl/350x200/f500aa/?text=Image4" />
    </a>
  </div>

  <div class="imagebox">
    <a href="#" class="product-images">
      <img class="active" src="https://fakeimg.pl/350x200/0000ff/?text=Image1" />
      <img src="https://fakeimg.pl/350x200/00ff00/?text=Image2" />
      <img src="https://fakeimg.pl/350x200/ff0000/?text=Image3" />
      <img src="https://fakeimg.pl/350x200/ffff00/?text=Image4" />
    </a>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/381465.html

標籤：javascript html css 图片源文件

上一篇：imgsrc三元運算子不顯示影像

下一篇：如何將位元組保存為影像？