Javascript 设置所选thumnail的样式

我有一个图像幻灯片，当点击thumnail图像时会显示大图像。到目前为止，代码运行良好。但现在我想为选定的图姆奈尔赋予一种风格，例如为选定的图姆奈尔赋予黑色边框。如何做到这一点

以下是我的html代码：

        <div id="slideshow">        

        <ul id="slide-wrapper">
            <li><img src="http://placekitten.com/120/120"/>         
            <p class="caption-title">Linkin Park's 'The Hunting Party': Track-by-Track Review</p></li>

            <li><img src="http://placekitten.com/120/120"/>         
            <p class="caption-title">Exclusive: The Griswolds Premiere New Song '16 Years' &amp; Talk Debut Album</p></li>

            <li><img src="http://placekitten.com/120/120"/>         
            <p class="caption-title">Bottled Water Comes From the Most Drought-Ridden Places in the Country</p></li>

            <li><img src="http://placekitten.com/120/120"/>         
            <p class="caption-title">Sarah Jaffe Video Premiere Watch The Haunting Lover Girl Clip</p></li>             
        </ul>

        <ul class="thumnails">
            <li class="img-thum">
                <img src="http://placekitten.com/120/120"/>
                <p class="thum-capt">Linkin Park's 'The Hunting Party': Track-by-Track Review</p></li>

            <li class="img-thum">
                <img src="http://placekitten.com/120/120"/>
                <p class="thum-capt">Exclusive: The Griswolds Premiere New Song '16 Years' &amp; Talk Debut Album</p></li>

            <li class="img-thum">
                <img src="http://placekitten.com/120/120"/>
                <p class="thum-capt">Bottled Water Comes From the Most Drought-Ridden Places in the Country</p></li>

            <li class="img-thum">
                <img src="http://placekitten.com/120/120"/>
                <p class="thum-capt">Sarah Jaffe Video Premiere Watch The Haunting Lover Girl Clip</p></li>             
        </ul>

    </div>

---

这是我的

您需要添加一个带点类型的边框。这是你想要的代码

$('.thumnails li').click(function() {
     $('img').removeClass('selectedThumb');  // removes border from previous selected thumbnail
     $(this).find('img').addClass('selectedThumb'); // Adds border to selected thumbnail

     ----
     ---

});

下面是css：

.selectedThumb{
    border: 2px dotted #000;
}

---

将活动类添加到选定的缩略图：

$this.siblings()
     .removeClass('active')
     .end().addClass('active');

JSFIDLE示例：

---

我可以再问一个问题：如何在所选图片的中上部创建一个三角形箭头。顺便说一句，我编辑了你的小提琴：我已经做了。谢谢如果你能再次帮助我，如何使它自动滑动，但也可点击。如果你需要，我将创建一个新的问题。两个小时前我就在找那条路了。

$this.siblings()
     .removeClass('active')
     .end().addClass('active');