代码有点多大家适当修改就可以用。
首先将图片和音乐分别放入文件夹中，使得调用方便。
代码如下：
<!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 - 烟火.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/鹿晗 - 追梦赤子心.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/薛之谦 - 演员.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/林俊杰 - 江南.mp3"; player.play(); isPlaying =true; } } </script> </head> <body> <div class="wrap"> <audio id='test'src="music/Vk - 烟火.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/鹿晗 - 追梦赤子心.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/薛之谦 - 演员.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/林俊杰 - 江南.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>