当值= 0时，将“静音扬声器"图标链接到音量滑块吗? [英] Linking 'muted speaker' icon to volume slider when value = 0?

问题描述

除了音量滑块以外，我还有一个扬声器图标，我希望在音量值为0时将图标更改为第二个(静音)扬声器图标.我尝试了各种无效的方法.我怎么做?谢谢！

I have a speaker icon besides my volume slider, and I would like the icon to change when the volume value is at 0, to a second (muted) speaker icon. I've tried different variations which didn't work. How do I do that? Thanks!

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

input[type=range] {
	-webkit-appearance: none;
	display: inline-block;
	vertical-align: top;
	width: 60%;
	margin: 10px 0;
}
input[type=range]:focus {
	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">

推荐答案

使用JQs attr方法来交换图像源.另外，如果使用外部JS文档，请确保图像的src路径相对于HTML文档.

Use JQs attr method to just swap the image source. Also, make sure the src path to the images is relative to the HTML document if you are using an external JS document.

JS:

 volumeslider.addEventListener("mousemove", checkMute); 

///每次拖动滑块时检查静音.

//check for mute each time the slider is dragged.

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

这篇关于当值= 0时，将“静音扬声器"图标链接到音量滑块吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！