使用按钮自动为滑块设置动画

Question

我有一个滑块（我在 Whosebug 上找到的）可以自动更改图像：

<input id="valR" type="range" min="1" max="48" value="0" step="1" oninput="showVal(this.value)" onchange="showVal(this.value)" />
    <span id="range">0</span>
    <img id="img">

<script>

    var val = document.getElementById("valR").value;
        document.getElementById("range").innerHTML=val;
        document.getElementById("img").src ="Precipitation/06z/HRDPS-Precipitation_Surface.06z.f001.jpg";
        function showVal(newVal){
          document.getElementById("range").innerHTML=newVal;
            if(newVal >= 1 && newVal < 2)
            document.getElementById("img").src = "Precipitation/06z/HRDPS-Precipitation_Surface.06z.f001.jpg";
            else if(newVal >= 2 && newVal < 3)
            document.getElementById("img").src = "Precipitation/06z/HRDPS-Precipitation_Surface.06z.f002.jpg";
<!--etc-->
}
</script>

但我想要一个“动画”切换按钮，它可以在单击时自动移动滑块（从而更改图像）

非常感谢您的帮助:)

Answer 1

已更新

只需添加带有onclick事件的按钮并操作对象即可。

let val = document.getElementById("valR").value;
document.getElementById("range").innerHTML = val;
document.getElementById("img").src = "https://image.flaticon.com/icons/png/128/879/879761.png";

function showVal(newVal){
  document.getElementById("range").innerHTML=newVal;
  if(newVal <= 10) document.getElementById("img").src = "https://image.flaticon.com/icons/png/128/879/879761.png";
  else if(newVal <= 20) document.getElementById("img").src = "https://image.flaticon.com/icons/png/128/3712/3712363.png";
  else document.getElementById("img").src = "https://image.flaticon.com/icons/png/128/744/744922.png";
 // Note that I change the if condition, so you could see the difference of the image between some ranged value
}

document.getElementById("inc").onclick = function(){
    val = parseInt(document.getElementById("range").innerHTML) + 1;
    (val > 48) ? val = 48 : val
    document.getElementById("range").innerHTML=val;
    document.getElementById("valR").value = val;
    showVal(val);
};

document.getElementById("dec").onclick = function(){
    val = parseInt(document.getElementById("range").innerHTML) - 1;
    (val < 0) ? val = 0 : val
    document.getElementById("range").innerHTML=val;
    document.getElementById("valR").value = val;
    showVal(val);
};

button{
  margin-top:15px;
  display:block;
}

<input id="valR" type="range" min="1" max="48" value="0" step="1" oninput="showVal(this.value)" onchange="showVal(this.value)" />
<span id="range">0</span>
<img id="img">
<button id="inc">Increment</button>
<button id="dec">Decrement</button>

使用按钮自动为滑块设置动画

Automatically animate a slider with a button

html

javascript

input

slider

jquery-animate

已更新