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

<script>
(function () {
    function initSwitcher() {
        document.querySelectorAll('.gf-infobox-new').forEach(function (box) {
            if (box.dataset.ready) return;
            box.dataset.ready = '1';

            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 () {
                    if (thumb.classList.contains('active')) return;

                    var src = thumb.dataset.src;
                    if (!src) return;

                    var oldImg = container.querySelector('img');
                    if (oldImg) {
                        oldImg.style.transition = 'opacity 0.15s';
                        oldImg.style.opacity = '0';
                    }

                    setTimeout(function () {
                        container.innerHTML = '<img src="' + src + '" style="max-width:100%;max-height:420px;object-fit:contain;opacity:0;transition:opacity 0.3s;">';
                        var newImg = container.querySelector('img');
                        if (newImg) {
                            newImg.onload = function () { newImg.style.opacity = '1'; };
                            requestAnimationFrame(function () {
                                if (newImg.complete) newImg.style.opacity = '1';
                            });
                        }
                    }, 150);

                    thumbs.forEach(function (t) { t.classList.remove('active'); });
                    thumb.classList.add('active');
                });
            });
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initSwitcher);
    } else {
        initSwitcher();
    }

    if (window.mw) {
        mw.hook('wikipage.content').add(initSwitcher);
    }
})();
</script>