2016-12-06 86 views
-4

我需要一个javascript代码,因为我想删除类W3自旋此ID =“imgg”当我暂停音频元素...需要JavaScript代码

<div style="width:100%;height:150px;"> 
<img id="imgg" class="w3-spin img-circle" src="Pic/sky.jpg" style="width:44%;height:149px;"> 
<img id="imgg" class="w3-spin img-circle" src="Pic/b.png" style="width:20%;height:75px;top:85px;left:150px;position:absolute;"> 
</div> 
<audio id="audio" controls loop autoplay style="width:100%;" onclick="pause()"> 
    <source src="<?php echo $row['Song']?>" type="audio/mpeg"> 
</audio> 

我的JavaScript ..

<script> 
    var player = document.getElementById("audio"); 
    var imgg1 = document.getElementById("imgg"); 
    function pause() { 
     player.pause(); 
     imgg1.removeClass("w3-spin"); 
     } 
</script> 
+0

你的HTML是无效的。你不应该有多个具有相同ID的元素。另外,你的问题是什么? –

+1

您需要javascript代码,我们需要看看您已尝试过 – Weedoze

+4

Stackoverflow不是一个寻找自由职业者的地方。试试Upwork,Elance或类似的东西。 – Quentin

回答

0

audio元素被暂停时,您应该正在收听的事件是pause。 (你猜对了)play

检查media events MDN上的列表可以查看audio元素的可能事件列表。

下面是一个例子。 添加红色背景颜色到.w3-spin以帮助说明类名。

var audioPlayer = document.getElementById("audio"); 
 
var imgg = document.getElementById("imgg"); 
 
audioPlayer.onpause = function() { 
 
    imgg.className = imgg.className.replace(/\bw3-spin\b/g, ""); 
 
}; 
 
audioPlayer.onplay = function() { 
 
    if (imgg.className.indexOf("w3-spin") === -1) { 
 
    imgg.className = imgg.className + " w3-spin"; 
 
    } 
 
};
.w3-spin { 
 
    background-color: red; 
 
}
<div style="width:100%;height:150px;"> 
 
<img id="imgg" class="w3-spin img-circle" src="Pic/sky.jpg" style="width:44%;height:149px;"> 
 
<img id="imgg2" class="w3-spin img-circle" src="Pic/b.png" style="width:20%;height:75px;top:85px;left:150px;position:absolute;"> 
 
</div> 
 
<audio id="audio" controls loop autoplay style="width:100%;"> 
 
    <source src="https://upload.wikimedia.org/wikipedia/en/2/26/Europe_-_The_Final_Countdown.ogg" type="audio/ogg"> 
 
</audio>

+0

谢谢先生我现在有一个想法:)帮助我很多谢谢你再:) – sherfortin