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

xiaoxiao2021-02-28  19

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

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

代码如下:

<!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>
转载请注明原文地址: https://www.6miu.com/read-2250075.html

最新回复(0)