查看“︁Widget:GF立绘切换”︁的源代码

<includeonly><script>
(function() {
    document.addEventListener('DOMContentLoaded', function() {
        // 获取所有信息框
        var infoboxes = document.querySelectorAll('.gf-infobox-new');
        
        infoboxes.forEach(function(infobox) {
            var thumbItems = infobox.querySelectorAll('.gf-thumb-item');
            var imageContainer = infobox.querySelector('.gf-image-container');
            var currentImage = imageContainer ? imageContainer.querySelector('img') : null;
            
            if (!thumbItems.length || !imageContainer) return;
            
            // 为每个缩略图添加点击事件
            thumbItems.forEach(function(thumb) {
                thumb.addEventListener('click', function() {
                    // 移除所有active状态
                    thumbItems.forEach(function(t) {
                        t.classList.remove('active');
                    });
                    
                    // 添加当前active状态
                    this.classList.add('active');
                    
                    // 获取图片地址
                    var imgSrc = this.getAttribute('data-img');
                    
                    // 创建新图片元素
                    var newImg = document.createElement('img');
                    newImg.src = imgSrc;
                    newImg.alt = '角色立绘';
                    newImg.style.maxWidth = '100%';
                    newImg.style.maxHeight = '400px';
                    newImg.style.objectFit = 'contain';
                    
                    // 淡入效果
                    newImg.style.opacity = '0';
                    newImg.style.transition = 'opacity 0.3s ease';
                    
                    // 替换图片
                    imageContainer.innerHTML = '';
                    imageContainer.appendChild(newImg);
                    
                    // 触发重排后执行淡入
                    setTimeout(function() {
                        newImg.style.opacity = '1';
                    }, 50);
                });
            });
        });
    });
})();
</script></includeonly>