使用CSS和JS的可滚动图片

如何解决使用CSS和JS的可滚动图片

我正在尝试使用“范围”输入功能来更改图片。我目前仅附加初始图片，并且在更改初始图片时，我只是删除图片，并使用小的动画将其他“ src”附加到元素上。

问题在于，如果您滚动得太快，我希望看到所有图片的动画都快速滚动。目前，如果走慢，您会看到图片改变了它的工作方式，但是如果快速滑动（从一个极端到另一个），您只会看到第一张和最后一张照片，而我的理想情况是其中滚动很快。

这里是我的HTML

<div class="face-Box">
   <img id="picture" class="my-element" src="https://image.freepik.com/free-icon/interrogation-mark-circle_318-9651.jpg" />
</div>

<input id="slider" type="range" min="1" max="4" value="2" oninput="changeColor()"/>

这是我的JS：

function changeColor(){
    let val = $('#slider').val();
  
  if(val == 1){
      changeImage("https://static.thenounproject.com/png/5724-200.png")
  }
  else if(val == 2){
    changeImage("https://www.iconfinder.com/data/icons/people-125/24/icon-people-neutral-face-512.png")
  }
  else if(val == 3){
    changeImage("https://www.usacustomjackets.com/wp-content/uploads/2016/07/smiley-face.png")
  }
  else if(val == 4){
    changeImage("https://hotemoji.com/images/dl/9/grin-emoji-by-google.png")
  }
}

function changeImage(picture){
  const element = document.querySelector('.my-element');
  element.classList.add('animate__animated','animate__slideOutUp');
  element.style.setProperty('--animate-duration','0.1s');
            
            
  element.addEventListener('animationend',() => {
    $('.my-element').removeClass();
    element.src = picture;
    element.classList.add('my-element','animate__animated','animate__slideInUp');
    element.style.setProperty('--animate-duration','0.1s');
  });
}

这是我的jsfiddle：https://jsfiddle.net/pn6hm4e7/2/

我将不胜感激，也欢迎您提出其他建议。