Изменение изображения каждые 5 секунд с использованием внешнего файла JS

Question

Я ищу справку о том, как я могу редактировать мой код ниже, чтобы каждые 5 секунд показывать новое изображение, используя HTML и внешний файл JS. Я хочу, чтобы это включало 4 изображения.

У меня есть этот код ниже, который включает тело при загрузке, чтобы изменить изображение. Как я могу переместить часть кода во внешний файл JS, в котором все еще меняются картинки?

        <img id="img1" class="img-responsive">
        <script>
        var imgArray = new Array("img/mockups/about_section/app_about_mockup_1.png","img/mockups/about_section/app_about_mockup_2.png","img/mockups/about_section/app_about_mockup_3.png","img/mockups/about_section/app_about_mockup_4.png");
        var imgCount = 0;
        function startTime() {
          if(imgCount == imgArray.length) {
            imgCount = 0;
          }
          document.getElementById("img1").src = imgArray[imgCount];
          imgCount++;
          setTimeout("startTime()", 5000);
        }
        </script>