图像库中的活动拇指

Active thumb in image gallery

本文关键字：活动 图像      更新时间：2023-09-26

我制作了这个图片库，但我想给活动拇指一个class="active"。如果我点击.small_image，我可以给它一个"活动"类，但在我点击其他拇指后，它们都会得到一个"活跃"类。所以我想，如果我做一个if语句，如果大图像和缩略图的rel和src相同，那么给一个类"active"，但我的代码不起作用。有人能告诉我我做错了什么吗？

http://jsfiddle.net/XNsHC/8/

$(document).ready(function () {
        $(".small_image").click(function () {
            event.preventDefault();
            var image = $(this).prop("rel");
            $('#under').prop('src', image);
            $('#above').fadeOut(600, function () {
                $('#above').prop('src', $('#under').prop('src')).css('display', 'block');
            });
        });
        if($(".small_image").prop("rel") == $("#under").prop('src', image)){
            $(this).addClass('active');
        }
    });

试试这样的方法：（使用jsFiddle-在.active周围添加红色边框）

$(".small_image").click(function () {
    event.preventDefault();
    $('.small_image.active').removeClass('active'); // remove "active" from current image
    $(this).addClass('active'); // add "active" to the new one
    var image = $(this).prop("rel");
    $('#under').prop('src', image);
    $('#above').fadeOut(300, function () {
        $('#current_image #above').prop('src', $('#current_image #under').prop('src'));
    });
}).eq(0).addClass('active'); // set the first one as "active" by default
相关文章：