淡入/淡出onmouseover =“ swapImage（）;

2024-05-19 • 问答

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

<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];

        }

    }

您可以在swapImage上使用超时功能来更改不透明度属性，并通过CSS来实现附加过渡效果。您可以在下面的示例中看到setTimout运行500ms，而过渡运行250ms。这对于获得平滑效果是必要的。

请参见以下示例（我对示例进行了一些更改）：

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（）;

joey_w_momo 回答：淡入/淡出onmouseover =“ swapImage（）;

大家都在问