javascript - HTML5 缩略图滑块

Question

目前，每当我拖动 HTML5 滑块时，我都会卡在该部分，它会在滑块的顶部或底部显示缩略图/小图片。我的滑块是这样的......

 <input name="sliderStatus"  id="sliderStatus" type="range" min="0" max="100" value="0" step="1"/>

但是如何做缩略图呢？有什么例子吗？谢谢 （：

Answer 1

据我了解，您想根据输入range值更改缩略图大小。

您需要将onchange事件侦听器添加到范围输入并将其附加到一些回调，updateThumbnail例如：

<input name="sliderStatus" onchange="updateThumbnail(this)"  id="sliderStatus" type="range" min="0" max="100" value="0" step="1"/>

然后在您的回调中根据您的值更改缩略图宽度：

function updateThumbnail(rangeInput) {
    var myImage = document.getElementById('someImage');
    myImage.width = rangeInput.value;
    myImage.height = rangeInput.value;
}

更新：

根据您的评论，您需要更改step范围输入中的属性：step="10"

例如，修改您的功能以显示您的图像：

function updateThumbnail(rangeInput) {
    var previousImage = document.getElementById('someImage' + (rangeInput.value - 10));
    if(previousImage) {
        previousImage.style.display = 'none';
    }
    var nextImage = document.getElementById('someImage' + rangeInput.value);
    nextImage.style.display = 'block';
}

图像的 HTML 标记应为：

<img src="pathToThumbnail" id="someImage0" style="display: block;">
<img src="pathToThumbnail" id="someImage10" style="display: none;">
<img src="pathToThumbnail" id="someImage20" style="display: none;">
...
<img src="pathToThumbnail" id="someImage100" style="display: none;">

在jsFiddle上查看演示