サムネイル画像クリックでメイン画像を切り替える

よくありますね。

まずHTML

<div class="container">

  <!-- メイン画像 -->
  <div class="main-img">
    <img src="/img/画像1.jpg"/>
  </div>

  <!-- サムネイル画像 -->
  <ul class="sub-img">
    <li>
      <img src="/img/画像1.jpg"/>
    </li>
    <li>
      <img src="/img/画像2.jpg"/>
    </li>
    <li>
      <img src="/img/画像3.jpg"/>
    </li>
  </ul>

</div>

次にJavaScript（jQuery）

$(function () {
  $(".sub-img img").on("click", function () {
    img = $(this).attr("src");
    $(".main-img img").fadeOut(500, function () {
      $(".main-img img")
        .attr("src", img)
        .on("load", function () {
          $(this).fadeIn(500);
        });
    });
  });
});

こんな感じです。
fadeIn/fadeOutの数値でフェード具合を調整します。