点击图片出现音乐----不喜勿喷

最新推荐文章于 2021-06-08 22:48:28 发布

宸灬

最新推荐文章于 2021-06-08 22:48:28 发布

阅读量615

点赞数 1

本文链接：https://blog.csdn.net/QM12580/article/details/80313137

版权

代码有点多大家适当修改就可以用。

首先将图片和音乐分别放入文件夹中，使得调用方便。

代码如下：

<!DOCTYPE html>

<html>

<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin:0;
padding:0;
background:-webkit-gradient(linear,left top,right bottom,from(#000),to(#c9c));
}
ul {
list-style: none;
}
.wrap {
position:relative;
width:600px;
height:400px;
margin-left: 50px;
margin-top: 20px;
border:1px solid #9cc5ef;
overflow:hidden;
float: left;
}
.wrap1 {
position:relative;
width:600px;
height:400px;
margin-left: 50px;
margin-top: 20px;
border:1px solid #9cc5ef;
overflow:hidden;
float: left;
}

.slider {
width:300%;
height:100%;
font:100px/400px Microsoft Yahei;
text-align:center;
color:#fff;
margin-left:0;
-webkit-animation:slide1 10s ease-out infinite;
}
.slider1 {
width:300%;
height:100%;
font:100px/400px Microsoft Yahei;
text-align:center;
color:#fff;
margin-left:0;
-webkit-animation:slide1 12s ease-out infinite;
}

.slider li {
float:left;
width:600px;
height:100%;
}
.slider1 li {
float:left;
width:600px;
height:100%;
}
/*创建三种动画策略*/
@-webkit-keyframes slide1 {
0% { margin-left:0;}
23% { margin-left:0;}
33% { margin-left:-600px;}
56% { margin-left:-600px;}
66% { margin-left:-1200px;}
90% { margin-left:-1200px;}
100% {margin-left:0;}
}

@-webkit-keyframes slide2 {
0% { margin-left:-600px;}
23% { margin-left:-600px;}
33% { margin-left:-1200px;}
56% { margin-left:-1200px;}
66% { margin-left:0;}
90% { margin-left:0;}
100% {margin-left:-600px;}
}

@-webkit-keyframes slide3 {
0% { margin-left:-1200px;}
23% { margin-left:-1200px;}
33% { margin-left:0;}
56% { margin-left:0;}
66% { margin-left:-600px;}
90% { margin-left:-600px;}
100% {margin-left:-1200px;}
}
</style>
<script>
// 检查是否正在播放
var isPlaying =false;
function play() {
var player = document.getElementById('test');
if (isPlaying) {
// 如果正在播放, 停止播放并停止读取此音乐文件
player.pause();
player.src = '';
isPlaying =false;
} else {
player.src="music/Vk%20-%20烟火.mp3";
player.play();
isPlaying =true;
}

}
</script>
<script>
// 检查是否正在播放
var isPlaying =false;
function play1() {
var player = document.getElementById('test1');
if (isPlaying) {
// 如果正在播放, 停止播放并停止读取此音乐文件
player.pause();
player.src = '';
isPlaying =false;
} else {
player.src="music/鹿晗%20-%20追梦赤子心.mp3";
player.play();
isPlaying =true;
}

}
</script>
<script>
// 检查是否正在播放
var isPlaying =false;
function play2() {
var player = document.getElementById('test2');
if (isPlaying) {
// 如果正在播放, 停止播放并停止读取此音乐文件
player.pause();
player.src = '';
isPlaying =false;
} else {
player.src="music/薛之谦%20-%20演员.mp3";
player.play();
isPlaying =true;
}

}
</script>
<script>
// 检查是否正在播放
var isPlaying =false;
function play3() {
var player = document.getElementById('test3');
if (isPlaying) {
// 如果正在播放, 停止播放并停止读取此音乐文件
player.pause();
player.src = '';
isPlaying =false;
} else {
player.src="music/林俊杰%20-%20江南.mp3";
player.play();
isPlaying =true;
}

}
</script>
</head>
<body>
<div class="wrap">
<audio id='test'src="music/Vk%20-%20烟火.mp3"></audio>
<ul class="slider1">
<li> <button οnclick='play();'><img src="imgs/17.jpg" width="100%" height="100%/"></button></li>
<li> <button οnclick='play();'><img src="imgs/18.jpg" width="100%" height="100%/"></button></li>
<li> <button οnclick='play();'><img src="imgs/19.jpeg" width="100%" height="100%/"></button></li>
</ul>
</div>
<div class="wrap1">
<audio id='test1'src="music/鹿晗%20-%20追梦赤子心.mp3"></audio>

<ul class="slider">
<li><button οnclick='play1();'><img src="imgs/20.jpg" width="100%" height="100%/"></button></li>
<li><button οnclick='play1();'><img src="imgs/21.jpg" width="100%" height="100%/"></button></li>
<li><button οnclick='play1();'><img src="imgs/22.jpeg" width="100%" height="100%/"></button></li>
</ul>
</div>
<div class="wrap">
<audio id='test2'src="music/薛之谦%20-%20演员.mp3"></audio>
<ul class="slider">
<li><button οnclick='play2();'><img src="imgs/23.jpg" width="100%" height="100%/"></button></li>
<li><button οnclick='play2();'><img src="imgs/24.jpg" width="100%" height="100%/"></button></li>
<li><button οnclick='play2();'><img src="imgs/25.JPEG" width="100%" height="100%/"></button></li>
</ul>
</div>
<div class="wrap1">
<audio id='test3'src="music/林俊杰%20-%20江南.mp3"></audio>
<ul class="slider1">
<li><button οnclick='play3();'><img src="imgs/26.jpg" width="100%" height="100%/"></button></li>
<li><button οnclick='play3();'><img src="imgs/27.jpg" width="100%" height="100%/"></button></li>
<li><button οnclick='play3();'><img src="imgs/28.jpg" width="100%" height="100%/"></button></li>
</ul>
</div>
</body>
</html>

宸灬

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
点击图片出现音乐----不喜勿喷

代码有点多大家适当修改就可以用。首先将图片和音乐分别放入文件夹中，使得调用方便。代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type=&q
复制链接

扫一扫