为每个值显示不同图像的 javascript slider

Question

我正在用 html 编写 slider ，它将根据 slider 值显示不同的图像。

因此，如果 slider 设置为值 1，则显示 image1.jpg，值 2 将显示 image2.jpg，依此类推。

我在 w3schools 上找到了 slider 部分，并设法向其输出新图像。 link to w3schools slider

但我不知道如何刷新图像，目前代码只是在旧图像一侧打印一张新图像。我++

有谁知道如何刷新图像，而不是每次都打印一张新图像。

如有任何帮助，我们将不胜感激!

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

output.innerHTML = slider.value;

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

  var x = document.createElement("IMG");
  x.setAttribute("src", "image" + this.value + ".jpg");
  document.body.appendChild(x);
}

<div class="slidecontainer">
  <input type="range" min="1" max="2" value="1" class="slider" id="myRange">
  <p>Value: <span id="value"></span></p>
</div>

Answer 1

您可以只将 img 元素 与默认图像或 src value 一起使用:

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>