使用拨号控件设置图像动画（HTML/JavaScript/…）

以下是我想要实现的目标

我有一系列从暗到白的图像（中间有各种灰度）。我想在画框下面或画框上面有一个刻度盘（像滑块一样）（没关系）。当滑块向左时，我显示黑色图像，当滑块向右时，我显示白色图像和中间的任何位置，我在其中选择一个图像。

我对Java脚本和HTML5的知识有限（因此我在这里提出问题），但我是一名程序员，所以我不怕代码。我不是在要求一个完全开发的解决方案（除非有），因为我很乐意自己编写它，但是如果你能给我一些提示、指导和想法来让它工作，那就太好了

• 如何创建滑块
• 当然，更重要的是，我选择了正确的图像来显示

如果可能的话，我想使用JS做一些事情，而不使用任何外部库。使用2D画布可以同时绘制图像和UI（滑块）吗

---

谢谢。

以下内容用于在HTML5中创建包含10个固定点的滑块

<input id="barslidesize" type="range"  min="1" max="10">

然后可以相应地切换此变量： 像

---

希望这能帮助你开始！这是一个非常基本的代码。

事实上，您确实需要一些Javascript。你可以用画布来做，但我认为这不是最好的解决方案

在这里，我把白色图像放在黑色图像的前面。然后，我使用该范围更改白色图像的不透明度，该图像渲染为灰色

CSS:

<style type="text/css">
    .greyslidercontainer {
        padding: 0px;
        background: url(black.png) no-repeat;
    }

    .greyslidercontainer img {
        display: block;
        opacity: 1;
    }
</style>

greyslidercontainer先生{
填充：0px；
背景：url（black.png）不重复；
}
.greyslidercontainer img{
显示：块；
不透明度：1；
}

HTML:

<div class="greyslidercontainer">
    <img src="white.png" />
    <input
        type="range"
        min="0.0"
        max="1.0"
        step="0.01"
        value="1"
        onchange="this.previousElementSibling.style.opacity = this.value"
    />
</div>

---

这是一个非常酷的解决方案，非常有用。不过，我提到了灰色图像以使其简单化，但图像“实际上是”文件。。。因此，这不是关于从白色到黑色的淡入淡出，而是实际使用不同的图像（如在文件中）作为每个“灰度级别”（每个图像/文件都不同）。

<style type="text/css">
    .greyslidercontainer {
        padding: 0px;
        background: url(black.png) no-repeat;
    }

    .greyslidercontainer img {
        display: block;
        opacity: 1;
    }
</style>

<div class="greyslidercontainer">
    <img src="white.png" />
    <input
        type="range"
        min="0.0"
        max="1.0"
        step="0.01"
        value="1"
        onchange="this.previousElementSibling.style.opacity = this.value"
    />
</div>