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

<includeonly><script>
(function() {
    // 等待DOM和图片加载完成
    function initSwitcher() {
        document.querySelectorAll('.gf-infobox-new').forEach(function(box) {
            if (box.dataset.initialized) return;
            box.dataset.initialized = 'true';
            
            var container = box.querySelector('.gf-image-container');
            var thumbs = box.querySelectorAll('.gf-thumb-item');
            
            if (!container || thumbs.length < 2) return;
            
            thumbs.forEach(function(thumb) {
                thumb.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 更新激活状态
                    thumbs.forEach(function(t) { t.classList.remove('active'); });
                    this.classList.add('active');
                    
                    // 获取新图片的文件名
                    var newFile = this.dataset.img;
                    if (!newFile) return;
                    
                    // 淡出旧图片
                    var oldImg = container.querySelector('img');
                    if (oldImg) {
                        oldImg.style.opacity = '0';
                        oldImg.style.transition = 'opacity 0.2s ease';
                    }
                    
                    // 创建并加载新图片
                    var newImg = document.createElement('img');
                    newImg.src = newFile; // MediaWiki会自动处理文件路径
                    newImg.style.maxWidth = '100%';
                    newImg.style.maxHeight = '400px';
                    newImg.style.objectFit = 'contain';
                    newImg.style.opacity = '0';
                    newImg.style.transition = 'opacity 0.3s ease';
                    
                    newImg.onload = function() {
                        // 替换内容
                        container.innerHTML = '';
                        container.appendChild(newImg);
                        // 触发淡入
                        requestAnimationFrame(function() {
                            newImg.style.opacity = '1';
                        });
                    };
                    
                    newImg.onerror = function() {
                        // 如果加载失败，恢复原状
                        if (oldImg) {
                            oldImg.style.opacity = '1';
                        }
                    };
                });
            });
        });
    }
    
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initSwitcher);
    } else {
        initSwitcher();
    }
    
    // 针对动态加载的内容再次尝试
    if (window.mw && mw.hook) {
        mw.hook('wikipage.content').add(initSwitcher);
    }
})();
</script></includeonly>