让你的网页充满音乐的气息

songjindian

浏览: 75621 次
性别:
来自: 河南

最近访客更多访客>>

spawnyy

半面油彩

昆山霸王

wang23086

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (37)

社区版块

存档分类

音乐 JavaScript XHTML 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 http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>带声音的图片切换</title>
<script language="javascript" type="text/javascript">
	var image;
	var current = 0;
	var images = new Array(5);
	var timerID;
	function init(){
		for(var i=0;i<images.length;i++){
			images[i] = new Image(500,500);
			images[i].src = "images/"+i+".jpg";
		}
		image = document.images[0];
	}
	function setSrc(i){
		current = i;
		image.src = images[i].src;
	}
	function next(){
		if(current>=4){
			return false;
		}else{
			current++;
			setSrc(current);
		}
	}
	function previous(){
		if(current<=0){
			return false;
		}else{
			current--;
			setSrc(current);
		}
	}
	function play(){
		if(current>=4){
			current=-1;
		}
		setSrc(++current);
	}
</script>
</head>

<body onload='init()'>
<form id="from1" name="myform" method="post" action="" >
<input type="button" name="Submit1" value="第一张" onclick="setSrc(0)"/>
<input type="button" name="Submit2" value="上一张" onclick="previous()"/>
<input type="button" name="Submit3" value="下一张" onclick="next()"/>
<input type="button" name="Submit4" value="最后一张" onclick="setSrc(4)"/>
<input type="button" name="Submit5" value="幻灯播放" onclick="timerID=setInterval(play,1000)"/>
<input type="button" name="Submit6" value="停止播放" onclick="clearInterval(timerID)"/>
<input type="button" name="Submit7" value="播放音乐" onclick="document.getElementById('sound').Play()"/>
<input type="button" name="Submit7" value="暂停音乐" onclick="document.getElementById('sound').Pause()"/>
<input type="button" name="Submit7" value="停止播放音乐音乐" onclick="document.getElementById('sound').Stop()"/>
</form>
<p>
<div align="center"><img src="images/0.jpg"</div>
</p>
<!-- 潜入声音文件-->
<embed id="sound" src="RainAndTears.mp3"  autostart="true" loop="true" width="0" height="0"></embed>
</body>
</html>

然后就能边欣赏图片，边听音乐了！

分享到：