Untitled

<html>
    <head>
        <meta charset="utf-8">
        <title>Анимация</title>
    </head>
    <body>
        <div style="text-align: center;">
            <img id="animation" src="images/s1.gif" style="margin: 120px 0 100px 0; padding-top: 10px; border: 4px solid #e0e0e0;">
        </div>
        <div style="text-align: center;">
            <button onclick="faster()">Быстрее</button>
            <button onclick="slower()">Медленнее</button>
            <button onclick="stop()">Стоп</button>
            <button onclick="start()">Старт</button>
        </div>
        <script>
            "use strict";
            var frames = ['s1.gif','s2.gif','s3.gif','s4.gif','s5.gif','s6.gif','s7.gif','s8.gif','s9.gif','s10.gif','s11.gif']
            var currentFrame = 0
            var img = document.getElementById("animation");
            var frameTime = 100
            var interval = null

            function animate(){
                currentFrame += 1;
                if (currentFrame > frames.length - 1) {
                    currentFrame = 0;
                }
                img.src = "images/" + frames[currentFrame];
            }


            function stop(){
                clearInterval(interval);
                interval = null;
            }


            function start(){
                stop();
                interval = setInterval(animate, frameTime);
            }


            function faster(){
                frameTime -= 50;
                if (frameTime <= 20) {
                    frameTime = 20;
                }
                if (interval != null) {
                    start();
                }
            }


            function slower(){
                frameTime += 50;
                if (frameTime >= 1500) {
                    frameTime = 1500;
                }
                if (interval != null) {
                    start();
                }
            }
        </script>
    </body>
</html>