当value = 0时，将'静音扬声器'图标链接到音量滑块？

我的音量滑块旁边有一个扬声器图标，我希望图标在音量值为0时更改为第二个（静音）扬声器图标。我试过不同的变化，没有奏效。我怎么做？谢谢！当value = 0时，将'静音扬声器'图标链接到音量滑块？

var volumeslider; 
 
volumeslider = document.getElementById("volumeslider"); 
 
\t // Add Event Handling 
 
\t volumeslider.addEventListener("mousemove", setvolume); 
 
\t // Functions 
 
\t function setvolume(){ 
 
\t  audio.volume = volumeslider.value/100; 
 
    }

input[type=range] { 
 
\t -webkit-appearance: none; 
 
\t display: inline-block; 
 
\t vertical-align: top; 
 
\t width: 60%; 
 
\t margin: 10px 0; 
 
} 
 
input[type=range]:focus { 
 
\t outline: none; 
 
} 
 
input[type=range]::-webkit-slider-runnable-track { 
 
width: 100%; 
 
height: 10px; 
 
cursor: pointer; 
 
animate: 0.2s; 
 
background: #000000; 
 
} 
 
input[type=range]::-webkit-slider-thumb { 
 
border: 1px solid #000000; 
 
height: 20px; 
 
width: 10px; 
 
border-radius: 1px; 
 
background: #ffffff; 
 
cursor: pointer; 
 
-webkit-appearance: none; 
 
margin-top: -10px; 
 
} 
 
input[type=range]:focus::-webkit-slider-runnable-track { 
 
background: #666666; 
 
} 
 
input[type=range]::-moz-range-track { 
 
width: 100%; 
 
height: 10px; 
 
cursor: pointer; 
 
animate: 0.2s; 
 
background: #000000; 
 
} 
 
input[type=range]::-moz-range-thumb { 
 
border: 1px solid #000000; 
 
height: 20px; 
 
width: 10px; 
 
border-radius: 1px; 
 
background: #666666; 
 
cursor: pointer; 
 
} 
 
input[type=range]::-ms-track { 
 
width: 100%; 
 
height: 10px; 
 
cursor: pointer; 
 
animate: 0.2s; 
 
background: transparent; 
 
border-color: transparent; 
 
border-width: 16px 0; 
 
color: transparent; 
 
} 
 
input[type=range]::-ms-fill-lower { 
 
background: #2a6495; 
 
border: 0.2px solid #010101; 
 
border-radius: 2.6px; 
 
} 
 
input[type=range]::-ms-fill-upper { 
 
background: #3071a9; 
 
border: 0.2px solid #010101; 
 
border-radius: 2.6px; 
 
} 
 
input[type=range]::-ms-thumb { 
 
border: 1px solid #000000; 
 
height: 20px; 
 
width: 10px; 
 
border-radius: 1px; 
 
background: #ffffff; 
 
cursor: pointer; 
 
} 
 
input[type=range]:focus::-ms-fill-lower { 
 
background: #3071a9; 
 
} 
 
input[type=range]:focus::-ms-fill-upper { 
 
background: #367ebd; 
 
}

<input id="volumeslider" type="range" min="0" max="100" value="100" step="1"> 
 
    <img src="https://maxcdn.icons8.com/Android/PNG/48/Mobile/speaker-48.png" width="25" height="32">

来源

2016-10-10 user6245760

因此，当值为零时设置src。 – epascarello

使用JQS ATTR方法只是交换图像源。另外，如果您使用的是外部JS文档，请确保图像的src路径与HTML文档相关。

JS：

volumeslider.addEventListener("mousemove", checkMute);

//检查静音滑块被拖动每次。

function checkMute(){ 
    if (audio.volume == 0){ 
     $(".speaker").attr("src", "images/speaker.png"); 
    }else{ 
     $(".speaker").attr("src", "images/speakermute.png"); 
    } 
}

来源

2016-10-10 21:38:13 Korgrue

我不能得到它的工作。（audio.volume == 0）{（“。speaker”）。attr（“src”，“images/speakermuted.png”）; （“。speaker”）。attr（“src”，“images/speaker.png”）;其他{0} } – user6245760

它不会让我编辑或正确地构造上述回复。我究竟做错了什么？不应该有一个。在图像类中的“说话人”之前。 – user6245760

取决于您如何构建您的CSS。如果您使用：伪伪类前的图标添加图标，则必须修改$（“.your-volume-icon-class”）中的目标对象才能定位图标类（或者如果它被附加到使用在伪类之前，你需要包含你之前的所有代码:: 以上所有的代码都是从DOM中抓取图标并将其转换为jQuery对象，以便操纵它 - 然后将属性“src”当音量为0时，指向静音图标的路径。另外，这是处理程序，你需要一个观察者，我会编辑代码。 – Korgrue

当value = 0时，将'静音扬声器'图标链接到音量滑块？

回答

相关问题