Question

我设置了一个阴影框库来显示图像。但是，除了下一个，上一个和关闭按钮之外，我还想添加一个音频按钮，以便我播放一个mp3文件，该文件可以对每张照片进行一些说明。这可能吗？这是我对图像的HTML代码...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="Script/jquery.js"></script> 
<link rel="stylesheet" type="text/css" href="Styles/shadowbox.css">
<script type="text/javascript" src="Script/shadowbox.js"></script>
<script type="text/javascript">

Shadowbox.init();
    window.onload = function() {
        Shadowbox.open({
            content:    'Images/Tech_trends_img/memory_capacity.png', 
            player: "img",
            title:  "Figure.1: Memory Capacity",
            gallery:    "TechTrends",
        });
    };
</script>

</head>

<body>

<div id="menu" style="display: none;">  
    <ul>
        <li><a rel="shadowbox[TechTrends]" href="Images/Tech_trends_img/processor_capacity.png" title="Figure.2: Processor Capacity"></a></li>      
        <li><a rel="shadowbox[TechTrends]" href="Images/Tech_trends_img/processor_capacity_2.png" title="Figure.3: Processor Capacity"></a></li>
        <li><a rel="shadowbox[TechTrends]" href="Images/Tech_trends_img/processor_performance.png" title="Figure.4: Processor Performance"></a></li>        
        <li><a rel="shadowbox[TechTrends]" href="Images/Tech_trends_img/post_1990.png" title="Figure.5: Processor Capacity Post 1990"></a></li>     
        <li><a rel="shadowbox[TechTrends]" href="Images/Tech_trends_img/processor_clk_rate.png" title="Figure.6: Processor Clock Rate">\</a></li>   
        <li><a rel="shadowbox[TechTrends]" href="Images/Tech_trends_img/physical_limits_moore.png" title="Figure.7: Physical Limits on Moore's Law"></a></li>   
    </ul>
</div>

Answer 1

使用此按钮添加音频按钮。

<!DOCTYPE html>
<script type="text/javascript">
function listen(){
var audio = document.getElementById("audio");
audio.currentTime = 0;
audio.play();
}
</script>

<audio preload="auto" id="audio">
  <source src="YOURAUDIOFILE.ogg" type="audio/ogg">
  <source src="YOURAUDIOFILE.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio> 
<input type="button" value="Listen"  onclick="listen()">

向Shadowbox JS库添加一个函数

1 个答案: