以下の動作がよく分かりません。

li.addEventListener("click",()=>{
      mainImage.src=image;
 });

複数あるサムネイルのうち、どれか一つをクリックしたら処理が実行されると思いますが、
「どのサムネイルをクリックしたか」はどのようにして認識しているのでしょうか?

また、サムネイルがブラウザ上に表示されているのでforの処理は完了しているはずです。
よってイベントリスナー内のimageには7のサムネイルが常に格納されていると思います。
なぜ、imageに0～6のサムネイルが格納されるのでしょうか?