小马奔跑 - 爱码网

代码

<!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>
效果

小马奔跑