スライドショーで選択した画像にどのようにクラスを追加するのですか？

Question

私は親指の画像をクリックして、私が選択したその親指の画像にしたいが、ここで私は、他の親指の画像前の親指の画像をクリックすると

CSSコード選択されたまま：

.imgStyle:hover { 
     border-color: black; 
} 
.imgStyle { 
    height: 100px; 
    width: 100px; 
    border: 2px solid grey; 
} 
.active { 
    border-color: red; 
} 

// JSをコード

$(document).ready(function() { 
    $('#divContainer img').on('click', function() { 

     $(this).addClass('active'); 

     var imgURl = $(this).attr('src'); 

     $('#mainImage').fadeOut(1000, function() { 
      $(this).attr('src', imgURl); 
     }).fadeIn(1000); 

    }); 
}); 

HTML：

   Var currentslide; 

       var oldSlide; 

：

<img id="mainImage" src="images/Chrysanthemum.jpg" width="540" height="500" style="border:3px solid grey"> 

<br/> 
<div id="divContainer"> 
    <img class="imgStyle" src="images/Chrysanthemum.jpg" /> 
    <img class="imgStyle" src="images/Desert.jpg" /> 
    <img class="imgStyle" src="images/Hydrangeas.jpg" /> 
    <img class="imgStyle" src="images/Jellyfish.jpg" /> 
    <img class="imgStyle" src="images/Koala.jpg" /> 
</div> 

Answer 1

$(document).ready(function() { 
 
    $('#divContainer img').on('click', function() { 
 
    $(this).addClass('active').siblings('img').removeClass('active'); 
 
    var imgURl = $(this).attr('src'); 
 
    $('#mainImage').fadeOut(1000, function() { 
 
     $(this).attr('src', imgURl); 
 
    }).fadeIn(1000); 
 
    }); 
 
});

.imgStyle:hover { 
 
    border-color: black; 
 
} 
 
.imgStyle { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 2px solid grey; 
 
} 
 
.active { 
 
    border-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<img id="mainImage" src="images/Chrysanthemum.jpg" width="540" height="500" style="border:3px solid grey"> 
 
<br/> 
 
<div id="divContainer"> 
 
    <img class="imgStyle" src="images/Chrysanthemum.jpg" /> 
 
    <img class="imgStyle" src="images/Desert.jpg" /> 
 
    <img class="imgStyle" src="images/Hydrangeas.jpg" /> 
 
    <img class="imgStyle" src="images/Jellyfish.jpg" /> 
 
    <img class="imgStyle" src="images/Koala.jpg" /> 
 
</div>

Answer 2

は2 VARを作成してクリックした画像のsiblingsからactiveクラスを削除します機能ではその後currentSlide、 にクラッセを追加し、現在のスライドから削除

At the top : 

       OldSlide= currentSlide; 

       CurtentSlide=$(this); 

を追加します。

申し訳ありませんが、私は電話で書いています。