Widget:GF立绘切换：修订间差异

2026年5月15日 (五) 11:16的版本

@@ 第1行： / 第1行： @@
-<includeonly><script>
+	<script>
-(function() {
+	(function() {
-    // 等待DOM和图片加载完成
+	    var containers = document.querySelectorAll('.infotemplatebox');
-    function initSwitcher() {
+	    containers.forEach(function(container) {
-        document.querySelectorAll('.gf-infobox-new').forEach(function(box) {
+	        var tabs = container.querySelectorAll('.gf-tab');
-            if (box.dataset.initialized) return;
+	        var slides = container.querySelectorAll('.gf-slide');
-            box.dataset.initialized = 'true';
+	        if (tabs.length === 0 || slides.length === 0) return;
+	        tabs.forEach(function(tab) {
-            var container = box.querySelector('.gf-image-container');
+	            tab.addEventListener('click', function() {
-            var thumbs = box.querySelectorAll('.gf-thumb-item');
+	                var index = parseInt(this.getAttribute('data-index'));
+	                tabs.forEach(function(t) { t.classList.remove('active'); });
-            if (!container || thumbs.length < 2) return;
+	                slides.forEach(function(s) { s.classList.remove('active'); });
+	                this.classList.add('active');
-            thumbs.forEach(function(thumb) {
+	                if (slides[index]) {
-                thumb.addEventListener('click', function(e) {
+	                    slides[index].classList.add('active');
-                    e.preventDefault();
+	                }
+	            });
-                    // 更新激活状态
+	        });
-                    thumbs.forEach(function(t) { t.classList.remove('active'); });
+	    });
-                    this.classList.add('active');
+	})();
+	</script>
-                    // 获取新图片的文件名
-                    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>