在 onmouseover="swapImage(); 上淡入淡出 in/out；

Question

我有这个标记，鼠标悬停在大拇指上时大图像会发生变化。它工作正常，但是当悬停在拇指上时大图像发生变化时如何添加一些淡入淡出效果？

<div id="image" class="prod-img-container">
   <a href="#"><img id="theImage" class="img-fluid" width="240" src="assets/image/car-big-1.jpg" alt=""></a>
</div>

<div id="thumbs" class="mouse-hover-info">
   <ul>
      <li><a class="active" href="#"><img src="assets/image/car-tn-1.jpg" width="60" alt="Car 1" onmouseover="swapImage(0);" onmouseout="swapImage(0);" /></a></li> 
      <li><a href="#"><img src="assets/image/car-tn-2.jpg" width="60" alt="Car 2" onmouseover="swapImage(1);" onmouseout="swapImage(0);" /></a></li>
      <li><a href="#"><img src="assets/image/car-tn-3.jpg" width="60" alt="Car 3" onmouseover="swapImage(2);" onmouseout="swapImage(0);" /></a></li>
      <li><a href="#"><img src="assets/image/car-tn-4.jpg" width="60" alt="Car 4" onmouseover="swapImage(3);" onmouseout="swapImage(0);" /></a></li>
   </ul>
</div>

我正在使用的javascript：

var imgArray = new Array(
        'car-big-1.jpg',
        'car-big-2.jpg',
        'car-big-3.jpg',
        'car-big-4.jpg',
    );

    var imgPath = "assets/image/";

    function swapImage(imgID) {
        var theImage = document.getElementById('theImage');
        var newImg;
        newImg = imgArray[imgID];
        theImage.src = imgPath + newImg;

    }


    function preloadImages() {      
        for(var i = 0; i < imgArray.length; i++) {
            var tmpImg = new Image;
            tmpImg.src = imgPath + imgArray[i];

        }

    }

Answer 1

您可以更改不透明度属性在 swapImage 上使用超时功能并通过 CSS 添加过渡效果。您可以在下面的示例中看到 setTimout 运行了 500 毫秒，而转换运行了 250 毫秒。这是平滑效果所必需的。

查看此示例（为了演示，我稍微更改了您的代码）：

var imgArray = new Array(
  'car-big-1.jpg',
  'car-big-2.jpg',
  'car-big-3.jpg',
  'car-big-4.jpg',
);

imgArray = [];

let images = document.querySelectorAll("#thumbs img");
images.forEach(i => {
  imgArray.push(i.src)
});

var imgPath = "assets/image/";

let timeOut = null;

function swapImage(imgID) {
  var theImage = document.getElementById('theImage');
  var newImg;
  newImg = imgArray[imgID];

  theImage.style.opacity = "0";
  clearTimeout(timeOut);
  timeOut = setTimeout(function() {
    theImage.src = newImg;
    theImage.style.opacity = "1";
  }, 500);
}


function preloadImages() {
  for (var i = 0; i < imgArray.length; i++) {
    var tmpImg = new Image;
    tmpImg.src = imgPath + imgArray[i];
  }
}

#thumbs {
  display: flex;
}

#image {
  min-height: 50vh;
}

#theImage {
  transition: opacity 250ms;
}

<div id="image" class="prod-img-container">
  <a href="#"><img id="theImage" class="img-fluid" width="240" src="assets/image/car-big-1.jpg" alt=""></a>
</div>

<div id="thumbs" class="mouse-hover-info">
  <ul>
    <li><a class="active" href="#"><img src="https://images.unsplash.com/photo-1574359173105-4b248ead7a4d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=642&q=80" width="60" alt="Car 1" onmouseover="swapImage(0);" onmouseout="swapImage(0);" /></a></li>
    <li><a href="#"><img src="https://images.unsplash.com/photo-1574473573257-3d804dd73d0d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" width="60" alt="Car 2" onmouseover="swapImage(1);" onmouseout="swapImage(0);" /></a></li>
    <li><a href="#"><img src="https://images.unsplash.com/photo-1574430032519-a1b649df3439?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=662&q=80" width="60" alt="Car 3" onmouseover="swapImage(2);" onmouseout="swapImage(0);" /></a></li>
    <li><a href="#"><img src="https://images.unsplash.com/photo-1574451311232-cb647e9d71f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" width="60" alt="Car 4" onmouseover="swapImage(3);" onmouseout="swapImage(0);" /></a></li>
  </ul>
</div>

在 onmouseover="swapImage(); 上淡入淡出 in/out；

Fade in/out on onmouseover="swapImage();

jquery

swap

fade

mousehover