Затухание перехода для изображений

Question

Я использую следующий код для создания ползунка диапазона, где каждое значение ползунка будет показывать свое изображение.

Теперь я хотел бы добавить своего рода переход, где изображения исчезнет после изменения значения ползунка. Как я мог это сделать?

Спасибо всем

var slider = document.getElementById("myRange");
var output = document.getElementById("value");

output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;

  var img = document.getElementById("img");
  img.setAttribute("src", "https://loremflickr.com/320/240/" + this.value);
}

<div class="slidecontainer">
  <input type="range" min="1" max="5" value="1" class="slider" id="myRange">
  <p>Value: <span id="value"></span></p>
  <img src="https://loremflickr.com/320/240/1" alt="" id="img">
</div>

Answer 1

В моем решении я добавил несколько CSS для обработки перехода, и для того, чтобы он был плавным в случае быстрого скольжения пользователя, я установил тайм-аут, который изменяет sr c на новое изображение, и сбрасывается каждый раз, когда происходит изменение (поэтому можно запланировать только одно изменение). Когда изображение загружается, мы возвращаем его обратно.

var slider = document.getElementById("myRange");
var output = document.getElementById("value");
var img = document.getElementById("img");

var loadOutTimeout;    

var loadHandler = function(e) {
  img.classList.remove("fade-out");
  img.classList.add("fade-in");
}

img.addEventListener("load", loadHandler);

output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
  img.classList.remove("fade-in");
  img.classList.add("fade-out");
  var imgVal = this.value;
  clearTimeout(loadOutTimeout);
  loadOutTimeout = setTimeout(function() {
    img.setAttribute("src", "https://loremflickr.com/320/240/" + imgVal);
  }, 200);
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.fade-in {
    animation: fade-in 0.2s ease;
    animation-fill-mode: forwards;
}

.fade-out {
    animation: fade-out 0.2s ease;
    animation-fill-mode: forwards;
}

<div class="slidecontainer">
  <input type="range" min="1" max="5" value="1" class="slider" id="myRange">
  <p>Value: <span id="value"></span></p>
  <img src="https://loremflickr.com/320/240/1" alt="" id="img">
</div>

Answer 2

У меня раньше было такое же требование и я использовал этот код, вы можете настроить его в соответствии с необходимостью.

var imageUrl = new Array();

        imageUrl[0] = 'https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg';

        imageUrl[1] = 'https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg';

        imageUrl[2] = 'http://cdn2.stylecraze.com/wp-content/uploads/2013/07/dahlia-flowers.jpg';

        imageUrl[3] = 'https://static.pexels.com/photos/39517/rose-flower-blossom-bloom-39517.jpeg';

        imageUrl[4] = 'https://static.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg';

        imageUrl[5] = 'http://cdn2.stylecraze.com/wp-content/uploads/2013/07/dahlia-flowers.jpg';
       
$(document).on('input change', '#slider', function() {//listen to slider changes
    var v=$(this).val();//getting slider val
   $('#sliderStatus').html( $(this).val() );
  $("#img").prop("src", imageUrl[v]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="slider" value="0.0" min="0" max="5" step="1" />
<br /><br />
<img src="" style='width:100px;height:100px;' id='img'/>
slider value = <span id="sliderStatus">0</span>