使用不透明度和setInterval淡入并交换图像

Question

[当用户将鼠标悬停在该图像的缩略图上时（例如图库），我正在尝试交换主图像。我在编辑DOM时需要使用set和clearInterval。所有这些都使用香草JavaScript。我在这里的问题是：

• 悬停的图像消失，但不消失。
• 交换和淡入淡出效果随着每次悬停而加速。

我知道set和clearInterval与此有关，但是我无法使其正常工作。

const MAINIMG = document.getElementById("mainImage");
let imgSrc;

function swapImg(e) {
    MAINIMG.style.opacity = 1;
    imgSrc = e.target.src;

    if (MAINIMG.currentSrc != e.target.currentSrc) {
        fadeImg();    
    } 
}

function fadeImg() {
    timer = setInterval(opacity, 100);
}

function opacity(src) {

    if (MAINIMG.style.opacity >= 0.5) {
        MAINIMG.style.opacity = MAINIMG.style.opacity - 0.1;

    } else if (MAINIMG.style.opacity == 0.4) {
        MAINIMG.src = imgSrc;
        MAINIMG.style.opacity = MAINIMG.style.opacity + 0.1;
        clearInterval(timer);
    }
}

document.getElementById("imgOne").addEventListener("mouseover", swapImg);
document.getElementById("imgTwo").addEventListener("mouseover", swapImg);

HTML

<img id="mainImage" src="../images/imgOne.jpg" alt="" width="200" />

<div id="galleryImages">
   <img src="../images/imgOne.jpg" height="111.35" id="imgOne"/>
   <img src="../images/imgTwo.jpg" width="80" id="imgTwo" />
</div>

Answer 1

编辑后的答案

style.opacity值有一个有趣的行为。当它的值大于0时，它是一个整数，但是当它达到0时，它成为一个字符串。因此，在执行MAINIMG.style.opacity = MAINIMG.style.opacity + 0.1;时，您实际上是在0.1上添加"0"。

您可以通过将不透明度值解析为浮点数，然后将其添加0.1来解决此问题。检查下面的示例。

MAINIMG.style.opacity = parseFloat(MAINIMG.style.opacity) + 0.1;

原始答案

CSS确实非常擅长处理过渡，并且可以为您节省计算元素的不透明度的许多麻烦。因此，如果您可以尝试使用它。

下面，我已经举例说明了如何结合使用Vanilla JavaScript和CSS使其工作。

swapImg函数获取悬浮图像的src，就像您自己的示例一样，并检查MAINIMG.src是否与悬浮图像不同。如果不是，它将在MAINIMG中添加一个名为fade的类。此类将图像的不透明度设置为0。不透明度过渡的持续时间在MAINIMG.style.transitionDuration = TRANSITION_SPEED + 'ms';行中设置。如果您愿意，可以修改此值。

After转换完成后，MAINIMG将不可见。然后setTimeout进入，更改src的MAINIMG并删除fade类，因此图像将再次出现。

我希望这是您想要的。如果您有任何问题，请通知我。

const MAINIMG = document.getElementById("mainImage");
const GALLERYIMAGES = document.getElementById("galleryImages");
const TRANSITION_SPEED = 250;

MAINIMG.style.transitionDuration = TRANSITION_SPEED + 'ms';

function swapImg(e) {
  if (e.target.tagName === 'IMG') {
    const newSrc = e.target.src;
    if (newSrc !== MAINIMG.src) {
      MAINIMG.classList.add('fade');
      setTimeout(function() {
        MAINIMG.src = newSrc;
        MAINIMG.classList.remove('fade');
      }, TRANSITION_SPEED);
    }
  }
}

GALLERYIMAGES.addEventListener('mouseover', swapImg);

img {
  display: inline-block;
}

#mainImage {
  width: 200px;
  height: 200px;
  transition-property: opacity;
  transition-timing-function: ease-in-out;
}

#mainImage.fade {
  opacity: 0;
}

#galleryImages img {
  width: 100px;
  height: 100px;
}

<img id="mainImage" src="https://source.unsplash.com/random/201x200" alt="" width="200" />

<div id="galleryImages">
   <img class="galleryHover" src="https://source.unsplash.com/random/201x200"/>
   <img class="galleryHover" src="https://source.unsplash.com/random/200x201"/>
</div>