Javascript 如何在滑块中的图像之间转换

我有一个简单的图像输入范围滑块。我想选择输入范围值，并能够淡入淡出图像

问题是-我的设置必须保持这种方式。我需要在li内有img标签，并且需要在类名下有作为css背景url的图像

如何根据滑块的位置识别当前播放和下一个播放的转换

要求：若用户进入滑块上的范围2，则图像2应可见。若用户进入范围4，则图像4应可见，以此类推

我已经能够读取输入范围并使用该图像类定位图像

如何删除前一个映像的活动状态并插入此新映像

请查看附件中的代码

让line=document.getElementByIdline； line.addEventListenerinput，functionevent{ setNewImageevent.target.value； }; 函数setNewImagevalue{ 让currentImage=document.getElementsByClassNameplaying； 让newImageClassName=图像+值； } .集装箱{ 显示器：flex； 证明内容：中心； 弯曲方向：立柱； 背景色：薰衣草； 宽度：400px； 高度：300px； } .图像容器{ 宽度：380px； 高度：280px； /*背景颜色：粉红色*/ } .滚动条{ /*填充：0 5px 5px 0*/ } .滚动条输入{ 宽度：380px； } ulli{ 列表样式：无； } .形象{ 宽度：380px； 高度：260px； 显示：无； } .玩{ 显示：块； } .image1{ 背景：url'http://placekitten.com/380/260"不重复,； } .image2{ 背景：url'http://placekitten.com/378/260"不重复,； } .image3{ 背景：url'http://placekitten.com/380/259"不重复,； } .image4{ 背景：url'http://placekitten.com/379/260"不重复,； } .image5{ 背景：url'http://placekitten.com/383/260"不重复,； } .image6{ 背景：url'http://placekitten.com/380/261"不重复,； }

---

我能解决它

让line=document.getElementByIdline； line.addEventListenerinput，functionevent{ setNewImageevent.target.value； }; 函数setNewImagevalue{ //console.logvalue； 让currentImage=document.getElementsByClassNameplaying； 让removedImage=currentImage[0].classList.removeplaying； 让imageToAdd=图像+值； //console.logimageToAdd； 让GetElLoadd=document.getElementsByClassNameimageToAdd； //console.loggeteltoad； 设newEl=getElToAdd[0]； newEl.classList.addplaying； } .集装箱{ 显示器：flex； 证明内容：中心； 弯曲方向：立柱； 背景色：薰衣草； 宽度：400px； 高度：300px； } .图像容器{ 宽度：380px； 高度：280px； /*背景颜色：粉红色*/ } .滚动条{ /*填充：0 5px 5px 0*/ } .滚动条输入{ 宽度：380px； } ulli{ 列表样式：无； } .形象{ 宽度：380px； 高度：260px； 显示：无； } .玩{ 显示：块； } .image1{ 背景：url'http://placekitten.com/380/260"不重复,； } .image2{ 背景：url'http://placekitten.com/378/260"不重复,； } .image3{ 背景：url'http://placekitten.com/380/259"不重复,； } .image4{ 背景：url'http://placekitten.com/379/260"不重复,； } .image5{ 背景：url'http://placekitten.com/383/260"不重复,； } .image6{ 背景：url'http://placekitten.com/380/261"不重复,； }