Question

我有一个图像幻灯片，可以在单击thumnail图像时显示大图像。到目前为止，代码工作正常。但是现在我想给选定的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>

这是我的JS

//When we click on thumb img
$('.thumnails li').click(function() {

var
    //SlideShow
    sshow = $(this).closest('#slideshow'),
    //Big
    big = sshow.find('#slide-wrapper'),
    //thumb
    thumb = sshow.find('.thumnails'),
    //Get index
    indx = thumb.find('li').index(this),
    //Current index
    currentIndx = big.find('li').index(big.find('li:visible'));

//If currentIndx is same as clicked indx don't do anything
if(currentIndx == indx) {
    return;
}

big
    //Fadeout current image
    .find('li:visible').fadeOut(0).end()
    //Fadein new image
    .find('li:eq(' + indx + ')').fadeIn(0);
});

这是我的Fiddle

Answer 1

您需要添加点缀类型的边框。这是您想要的代码。

$('.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;
}

Answer 2

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

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

JSFiddle示例：

<强> http://jsfiddle.net/rj3yuvvy/3/

设置选择缩略图的样式

2 个答案: