在js中,切换图片,并且开始点击A图片时,播放音乐,随之A图片变成了B图片(A,B图片在同一位置),在点击B图片,音乐停止,随之B图片变成A图片,如此循环。没学过js,临时拼凑的代码,有问题,不能实现上述功能,应该怎么写?<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<tr>
<td align="left"><input type="image" src="images/Voice.jpg"<%--带X的喇叭--%>
onclick="play_click(this,'D:\\Program Files\\kuwo\\song\\陈奕迅-你的背包.mp3');" />
</td>

</tr>
</table>
<div id="div1"></div>
<script language="javascript">
function play_click(sef, url) {
var div = document.getElementById('div1');
if(div.src="images/Voice.jpg"){<%--当是带X的喇叭图标时--%>
div.src="images/wy_bm.jpg";<%--切换播放的喇叭图标--%>
 
 div.innerHTML = '<embed src="'+url+'" loop="0" autostart="true" hidden="true"></embed>';
var emb = document.getElementsByTagName('EMBED')[0];
}
if(div.src="images/wy_bm.jpg"){<%--当是播放的喇叭图标时--%>
div.src="images/Voice.jpg";<%--切换带X的喇叭图标--%>

div.innerHTML = '<embed src="-1" loop="0" autostart="true" hidden="true"></embed>';
var emb = document.getElementsByTagName('EMBED')[0];
}


}
</script>
</body>
</html>
JavaScript图片音乐

解决方案 »

  1.   

    1:判断时需使用连等.if(a==b)
    2:if(div.src="images/Voice.jpg"){//按LZ的意图这里的div.src应该改为sef.src吧?
    3:sef.src这个值的结果和LZ想像中的有差别,因为它将是完整路径的,你不妨alert(sef.src)看看结果
    4:逻辑关系使用错误,两个if是并行的,没有使用if(){}else{}来做区别处理,即使是前面的所有操作均没有错误,你看到的永远是你点击时的效果。第一个if执行了你的操作,更改图片,播放歌曲,但紧跟着第二个if执行的时候,因为你之前的操作使得它再次生效,因此又再次执行你的操作,再次更改图片回原来的
    5:'D:\\Program Files\\kuwo\\song\\陈奕迅-你的背包.mp3'在真实的网站中,这样的路径是无效的,一切路径需以网站根目录为起点下面两段代码,一段是按LZ的思路来改的,另一段是稍做优化了的
    function play_click(sef, url) {
        var div = document.getElementById('div1');//获取操作区域 
        if(sef.src.indexOf('1.gif')!=-1){//如果是初始化状态             
            sef.src="2.gif";//切换图片                                     
            div.innerHTML = '切换到2了';//播放歌曲                     
        }else{//正在播放歌曲                
            sef.src="1.gif";//图片切回                                  
            div.innerHTML = '切回到1了'; //停止歌曲播放                
        }                                     
    }//预定义一个全局变量来记录切换的状态,以避免使用之前稍嫌繁琐的判断
    //值为1时表示未播放歌曲
    var status=1;
    function play_click(sef,url){
        var div = document.getElementById('div1');//获取操作区域
        sef.src = status==1 ? "2.gif" : "1.gif";//切换图片
        div.innerHTML = status==1 ? "切换到2了" : "切回到1了";//播放歌曲切换
        status = status==1 ? 2 : 1;//状态值切换
    }  
      

  2.   

    <img src="http://www.iconpng.com/png/vistamultimediaicons/play1pressed.png" style="cursor: pointer" id="an">
    <bgsound src="" loop="-1" id="music">
    <script type="text/javascript">
    var music=document.getElementById("music");
    document.getElementById("an").onmousedown=function(){
        if(this.src.indexOf("play1pressed")!=-1){
            this.src="http://www.iconpng.com/png/playstoppauseicons/pausepressed.png";
            music.src="http://mp3.9ku.com/file2/73/72400.mp3";
        }else{
            this.src="http://www.iconpng.com/png/vistamultimediaicons/play1pressed.png";
            music.src="";
        }
    }
    </script>
      

  3.   

    我把你的音乐地址换成我本机绝对地址,音乐播放不出,换成song/72400.mp3,相对地址也不行,为什么?还有你的代码只有IE内核才可以播放。
      

  4.   

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    </head>
    <body>
    <table border="0" align="right"  >
    <thead><tr></tr></thead>
    <tr>
    <td align="right" style="width: 62px; height: 55px"><input type="image" src="images/Voice.jpg"<%--带X的喇叭--%>
    onclick="play_click(this,'D:\\Program Files\\kuwo\\song\\陈奕迅-你的背包.mp3');" />
    </td>

    </tr>
    </table>
    <div id="div1"></div>
    <script language="javascript">
    function play_click(sef, url) {
    var div = document.getElementById('div1');
    if(sef.src.indexof("images/Voice.jpg")!=-1){<%--当是带X的喇叭图标时--%>
    sef.src="images/wy_bm.jpg";<%--切换播放的喇叭图标--%>
     div.innerHTML = '<embed src="'+url+'" loop="0" autostart="true" hidden="true"></embed>';
     var emb = document.getElementsByTagName('EMBED')[0];
    }
    else{          <%--当是播放的喇叭图标时--%>
    sef.src="images/Voice.jpg";<%--切换带X的喇叭图标--%>
    div.innerHTML = '<embed src="-1" loop="0" autostart="true" hidden="true"></embed>';
    var emb = document.getElementsByTagName('EMBED')[0];
    }
    }

    </script>
    </body>
    </html>怎么还是不行?这是jsp文件,里面放js脚本。
      

  5.   

    indexOf不是indexof至于歌曲能不能正常播放,播放器代码没细想,好像你这个播放器的代码不是能兼容所有浏览器的。但那些操作应该都能执行