Question

我在我的网站上使用全屏图像库，但是我正在尝试设置缩略图的样式，以便让我能够真实地浏览不同的图像。使用JS文件生成tumbnails。我设法将它们设置为具有正常和悬停状态的三角形。

我的问题是，我想在此处添加一个ACTIVE，当显示某些图像时显示黑色三角形。我怎么能这样做？

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>

CSS

#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;
}

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

Answer 1

根据对该问题的最后澄清评论，我相信您应该使用JavaScript从缩略图中添加和删除相应的CSS类（例如displayed）。并将最后一个规则选择器修改为：

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

Answer 2

问题由 Shefqet Avdullau

回答

的Javascript

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;
};

CSS

/* 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;
}

为缩略图创建活动状态

2 个答案: