代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box{ width:400px; height:300px; text-align: center; margin:50px auto; } </style> </head> <body> <div id="box"> <button id="btn">跑起来</button><br> <img src="img1/a1.jpg" alt=""> <audio src="ma.mp3" id="audio"></audio> </div> <script> var btn = document.getElementById('btn'); var audio = document.getElementById('audio'); var img = document.getElementsByTagName('img')[0]; var arr = ['img1/a1.jpg','img1/a2.jpg','img1/a3.jpg','img1/a4.jpg','img1/a5.jpg','img1/a6.jpg','img1/a7.jpg','img1/a8.jpg','img1/a9.jpg','img1/a10.jpg','img1/a11.jpg','img1/a12.jpg'] var num = 0; btn.onclick = function(){ audio.play(); setInterval(function(){ num++; if(num > arr.length-1){ num = 0; } img.src = arr[num]; // },50) } </script> </body> </html>
效果
