Question

我有一个Javascript滑块，它使用数组作为选项。但是，拖动时它不会改变。

var img = document.getElementById('img');
var img_array = ['http://www.w3schools.com/images/w3logotest2.png', 'http://www.w3schools.com/html/img_html5_html5.gif'];

function setImage(obj) {
  var value = obj.value;
  img.src = img_array[value];

}

<img id='img' src='http://www.w3schools.com/images/w3logotest2.png' />
<input onchange='setImage(this)' type="range" min="0" max="1" value="0" step="1" />

有人能给我一些有关如何在拖动滑块时而不是在放开鼠标按钮时更改图像的指导

Answer 1

使用oninput代替onchange

（Get value of slider while it's being moved?）

var img = document.getElementById('img');
var img_array = ['http://www.w3schools.com/images/w3logotest2.png', 'http://www.w3schools.com/html/img_html5_html5.gif'];

function setImage(obj) {
  var value = obj.value;
  img.src = img_array[value];

}

<img id='img' src='http://www.w3schools.com/images/w3logotest2.png' />
<input oninput='setImage(this)' type="range" min="0" max="1" value="0" step="1" />

Answer 2

在函数内移动var img = document.getElementById('img');。

var img_array = ['http://www.w3schools.com/images/w3logotest2.png', 'http://www.w3schools.com/html/img_html5_html5.gif'];
function setImage(obj)
{
    var img = document.getElementById('img');
    var value = obj.value;
    img.src = img_array[value];

}

<img id='img' src='http://www.w3schools.com/images/w3logotest2.png'/>
<input onchange='setImage(this)' type="range" min="0" max="1" value="0" step="1" />

拖动时更改滑块

2 个答案: