Question

我输入的HTML元素的类型范围为：

<body onload="rotar()">
  <img src="#" id="locator" />
  <input type="range" name="points" id="loop" min="1" max="20" data-show-value="true">
</body>

基本上是这样的，此页面显示动态变化的图像，我希望滑块id“ loop”更改其值，就像图像一样，以便它根据其移动。

function rotar(){
var slider = document.getElementById("loop");
var locator = document.getElementById('locator'),
    dir = 'static/visor/img/',                   
    delayInSeconds = 3,                        
    num = 1,
    len = 20;
setInterval(function(){
    locator.src = dir + num+'.png';
    if (num === len){
        num = 1;
    }
    else{
        num++;
    }
    slider.value = num;
}, delayInSeconds * 50);}

Answer 1

我没有任何图像目录，所以我只用一个简单的输入就完成了。请检查此http://jsfiddle.net/maxofpower/tAs6V/275/

<body onload="rotar()">
 <form ><div>
  <input id="loop" onchange="amount.value=rangeInput.value" oninput="amount.value=rangeInput.value" type="range" min="0" max="200" name="rangeInput" />
  <input id="box" type="text" value="0" name="amount" for="rangeInput"  oninput="rangeInput.value=amount.value" />
 </div></form>
</body>

<script>
 function rotar() {
 var slider = document.getElementById("loop");                             
  var num = 1;
  setInterval(function(){
  slider.value = num++;
  }, 500);
  };
</script>

Answer 2

您的问题是传递给setInterval方法的延迟，因为delay参数以毫秒为单位，要获得2.8秒，您必须将delayInSeconds变量乘以1000

您的代码中有一些错误，您使用变量名img#locator引用了变量名rotator来引用locator元素，这将导致未定义的变量错误。我的回答是将变量的名称从rotator更改为locator，并且将延迟时间设置为2.8秒。

这是一个演示：

function rotar() {  
  var slider = document.getElementById("loop"),
      locator = document.getElementById('locator'),
      dir = 'static/visor/img/',
      delayInSeconds = 2.8,
      num = 1,
      len = 20;
  
  setInterval(function() {  
    locator.src = dir + num + '.png';    
    num = (num === len) ? 1:num + 1;
    slider.value = num;
  }, delayInSeconds * 1000);
}

<body onload="rotar()">
  <img src="#" id="locator" />
  <input type="range" name="points" id="loop" min="1" max="20" data-show-value="true">
</body>

如何为输入范围设置动画以动态更改其值？

2 个答案: