Javascript 为缩略图创建活动状态

我在我的网站上使用了一个全屏图像库，但是我正在尝试设计缩略图，使我能够浏览不同的图像。Tumbnail是使用JS文件生成的。我设法把它们设计成三角形，带有正常和悬停状态

我的问题是，我想添加一个活动的，当某些图像显示时，它会显示一个黑色三角形。我该怎么做

JS文件

<script type="text/javascript">
    var slider;
    var images = [
        "images/productie/1.jpg",
        "images/productie/2.jpg",
        "images/productie/3.jpg",
        "images/productie/4.jpg",
        "images/productie/5.jpg"
    ];
    var index = 0;
    var transitionSpeed = 500;
    var imageIntervals = 5000;
    var startIntervals;
    var intervalSetTime;
    var contentOpen = false;

    $(document).ready(function(){

        slider = $('#slider1').bxSlider({
            mode: 'fade',
            controls: false,
            pause: imageIntervals
        });

        for (i=0;i<=images.length - 1;i++){
            $('#thumb-container').append('<a href="javascript:goToContent('+ i +')"><img src="'+ images[i] +'?size=thumb" alt="Image '+ i +'" /></a>');
        }

        $(function() {

            $.preload(images, {
                init: function(loaded, total) {
                    $("#indicator").html("<img src='images/load.gif' />");          
                },

                loaded_all: function(loaded, total) { 
                    $('#indicator').fadeOut('slow', function() {
                        $('#left-side').fadeIn('slow');
                        $('#thumb-container').fadeIn('slow');

                        $.backstretch(images[index], {speed: transitionSpeed});

                        startIntervals = function (){
                            intervalSetTime = setInterval(function() {
                            index = (index >= images.length - 1) ? 0 : index + 1;
                            $.backstretch(images[index]);
                            slider.goToNextSlide()
                        }, imageIntervals)};

                        startIntervals();                   
                    });
                }
            });
        });
    });

    function goToContent(slideNum){
        clearInterval(intervalSetTime);
        index = slideNum;
        $.backstretch(images[index]);
        slider.goToSlide(slideNum);
        if (contentOpen == false){
            startIntervals();
        }
    };

    function showContent(){
        $('.content-bg').fadeIn('slow');
        clearInterval(intervalSetTime);
        contentOpen = true;
    };
    function closeContent(){
        $('.content-bg').fadeOut('slow');
        startIntervals();
        contentOpen = false;
    };
    </script>

---

关于这个问题的最后一条澄清意见，我认为您应该使用JavaScript从缩略图图像中添加和删除相应的CSS类（例如，

显示的

）。并将最后一个规则选择器修改为：

#thumb-container img:hover, #thumb-container img.displayed

---

问题由谢菲特·阿杜劳回答

Javascript

---

试试

#thumb container:active img

如果#thumb container只包含一个img。Hee-Alexander，这不起作用..呃，那么“active”是什么意思<代码>：active是当您激活（例如，按下鼠标按钮）元素时应用的伪类…我的意思是使用active，即当显示图像编号2时，缩略图编号2将以与悬停相同的样式指南高亮显示。所以它们应该相互对应Alexander我在哪里可以找到显示的类？它是一个CSS类。您将把它作为

imageElement.className=“displated”

添加到图像中。更多关于这一点，谢谢你，会调查的！希望能解决这个问题Alexander我尝试过：for（I=0；I

id=“thumb container img.displated”

错误，因为您试图将类分配给A元素，而不是img元素。请删除“img.displated”并使用

我强烈建议您至少使用一个CSS选择器。

#thumb-container img:hover, #thumb-container img.displayed

var slider;
var images = [
    "IMAGES LINK",
    "IMAGES LINK",
    "IMAGES LINK"
];
var index = 0;
var transitionSpeed = 500;
var imageIntervals = 5000;
var startIntervals;
var intervalSetTime;
var contentOpen = false;

$(document).ready(function(){

    slider = $('#slider1').bxSlider({
        mode: 'fade',
        controls: false,
        pause: imageIntervals
    });

    for (i=0;i<=images.length - 1;i++){
        $('#thumb-container').append('<a href="javascript:goToContent('+ i +')"><img src="'+ images[i] +'?size=thumb" alt="Image '+ i +'" /></a>');
    }

    $(function() {

        $.preload(images, {
            init: function(loaded, total) {
                $("#indicator").html("<img src='images/load.gif' />");            
            },

            loaded_all: function(loaded, total) {
                $('#indicator').fadeOut('slow', function() {
                    $('#left-side').fadeIn('slow');
                    $('#thumb-container').fadeIn('slow');

                    /* added by Shefqet Avdullau */
                    $('#thumb-container a').removeClass('current_anchor').eq(index).addClass('current_anchor');
                    $.backstretch(images[index], {speed: transitionSpeed});

                    startIntervals = function (){
                        intervalSetTime = setInterval(function() {
                        index = (index >= images.length - 1) ? 0 : index + 1;

                        /* added by me */
                        $('#thumb-container a').removeClass('current_anchor').eq(index).addClass('current_anchor');

                        $.backstretch(images[index]);
                        slider.goToNextSlide()
                    }, imageIntervals)};

                    startIntervals();                    
                });
            }
        });
    });
});

function goToContent(slideNum){
    clearInterval(intervalSetTime);
    index = slideNum;
    /* added by Shefqet Avdullau */
    $('#thumb-container a').removeClass('current_anchor').eq(index).addClass('current_anchor');

    $.backstretch(images[index]);
    slider.goToSlide(slideNum);
    if (contentOpen == false){
        startIntervals();
    }
};

function showContent(){
    $('.content-bg').fadeIn('slow');
    clearInterval(intervalSetTime);
    contentOpen = true;
};
function closeContent(){
    $('.content-bg').fadeOut('slow');
    startIntervals();
    contentOpen = false;
};

/* THUMB SECTION */

#thumb-container{
    display:none;
}

#thumb-container img{
    float:left;
    border:0;
    width: 0;
    height: 0;
    margin:2px;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid  #fff;
}

/* added by Shefqet Avdullau */

#thumb-container a.current_anchor img,

#thumb-container img:hover,
#thumb-container img.displayed {
    float:left;
    border:0;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid  #6bcade;
}