ドットインストールの「jQueryで作るスライドショー」をJavaScriptのイベントリスナで書き直してみた

ドットインストールの「jQueryで作るスライドショー」をJavaScriptで書いてみた - Qiita
のさらに書き直しです。インデントのついたコメント部分に jQueryで作るスライドショー (全8回) - プログラミングならドットインストールのソースを載せています。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQueryを使わずスライドショー</title>
    <style>
        body {
            margin: 10px auto;
            text-align: center;
        }
        img {
            width: 50%;
        }
        .thumbnail {
            width: 125px;
            height: 83px;
            opacity: 0.5;
            cursor: pointer;
        }
        .current {
            opacity: 1.0;
        }

        .thumbnail + .thumbnail { // 隣接セレクタ
            margin-left: 4px;
        }
    </style>
</head>

<body>
    <div id="thumbnails"></div>
    <div id="main"></div>
    <div id="nav">
        <button id="prev">&laquo; 前へ</button>
        <button id="next">次へ&raquo;</button>
        <button id="play">再生</button>
        <button id="stop">停止</button>
    </div>

<script>
    //変数の定義、ファイルを配列格納
    // DOM読み込み後(DOMContentLoadedイベント発生後)に実行するので
    // $(function() {});
    // の中に記載する。
    var files = [
            'img/photo01.jpg',
            'img/photo02.jpg',
            'img/photo03.jpg',
            'img/photo04.jpg'
                ];

    var img;
    var timer;
    var currentNum = 0;
    var nowPlaying = false;

    //配列から動的にimageを表示するためのHTMLを作成
    for(var i = 0; i < files.length; i++) {
        img = document.createElement('img');
        img.src = files[i];
        img.className = 'thumbnail';
                    //  img = $('<img>').attr('src', files[i]).addClass('thumbnail');
        document.getElementById("thumbnails").appendChild(img);
                    //  $('#thumbnails').append(img);
    }
    img = document.createElement('img');
    img.src = files[0];
    var mainImg = document.getElementById('main').appendChild(img);
                    //  $('#main').append(
                    //      $('<img>').attr('src', files[0]);
                    //  );
    var imgs = document.getElementsByClassName('thumbnail');
                    //  $('.thumbnail') に相当
    imgs[0].className = 'thumbnail current';
                    //  $('.thumbnail:first').addClass('current');

    var n = document.getElementById('main').getElementsByTagName('img')[0];
                    //  $('#main img') に相当

    for(var i = 0; i < imgs.length; i++) {
        imgs[i].addEventListener("click", function() {
            n.src = this.src;
            for(var j = 0; j < imgs.length; j++) {
                imgs[j].classList.remove('current');
            }
                    //  sibli^Qngs().removeClass('current') に相当
            this.className = 'thumbnail current';
                    //  $(this).addClass('current') に相当
            for(var j = 0; j < imgs.length; j++) { 
                if(imgs[j].classList[1] == "current") {
                    currentNum = j;
                } 
            }
                    //  currentNum = $(this).index() に相当
        });
    }
                    //  $('.thumbnail').click(function() {
                    //      $('#main img').attr('src', $(this).attr('src'));
                    //      currentNum = $(this).index();
                    //      $(this).addClass('current').sibli^Qngs().removeClass('current');
                    //  });

    //前へボタンの実装
    var prev = document.getElementById('prev');
    prev.addEventListener("click", function() {
        currentNum--;
        if(currentNum < 0) {
            currentNum = files.length - 1;
        }
        n.src = files[currentNum];
        for(var j = 0; j < imgs.length; j++) {
            imgs[j].classList.remove('current');
        }
        imgs[currentNum].className = 'thumbnail current';
    });
                    //  $('#prev').click(function() {
                    //      currentNum--;
                    //      if(currentNum < 0) {
                    //          currentNum = files.length - 1;
                    //      }
                    //      $('#main img').attr('src', files[currentNum]);
                    //      $('.thumbnail').removeClass('current');
                    //      $('.thumbnail').eq(currentNum).addClass('current');
                    //  }):

    //次へボタン実装
    var next = document.getElementById('next');
    next.addEventListener("click", function() {
        currentNum++;
        if(currentNum > files.length - 1) {
            currentNum = 0;
        }
        n.src = files[currentNum];
        for(var j = 0; j < imgs.length; j++) {
            imgs[j].classList.remove('current');
        }
        imgs[currentNum].className = 'thumbnail current';
    });
                    //  $('#next').click(function() {
                    //      currentNum++;
                    //      if(currentNum > files.length - 1) {
                    //          currentNum = 0;
                    //      }
                    //      $('#main img').attr('src', files[currentNum]);
                    //      $('.thumbnail').removeClass('current');
                    //      $('.thumbnail').eq(currentNum).addClass('current');
                    //  }):

    //一定時間でスライドしていく機能実装
    function autoPlay() {
        next.click();
        timer = setTimeout(function() {
            autoPlay();
        }, 1000);
    }
                    //  function autoPlay() {
                    //      $('#next').click();
                    //      timet = setTimeout(function() {
                    //          autoPlay();
                    //      }, 1000);

    //再生ボタンでスライドショー動作
    document.getElementById('play').addEventListener("click", function() {
        if (nowPlaying) return;
        nowPlaying = true;
        autoPlay();
    });
                    //  $('#play').click(function() {
                    //      if (nowPlaying) return;
                    //      nowPlaying = true;
                    //      autoPlay();
                    //  });

    //停止ボタンでスライドショーを止める
    document.getElementById('stop').addEventListener("click", function() {
        clearTimeout(timer);
        nowPlaying = false;
    });
                    //  $('#stop').click(function() {
                    //      clearTimeout(timer);
                    //      nowPlaying = false;
                    //  });
</script>
</body>
</html>