打开/关闭菜单
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

MediaWiki:Common.js:修订间差异

MediaWiki界面页面
秋绘君留言 | 贡献
无编辑摘要
标签已被回退
秋绘君留言 | 贡献
无编辑摘要
标签已被回退
第43行: 第43行:
});
});


/* 首页智能交互轮播图 */
/* 首页智能无缝轮播图 */
mw.hook('wikipage.content').add(function($content) {
mw.hook('wikipage.content').add(function($content) {
     $content.find('.dynamic-carousel').each(function() {
     $content.find('.dynamic-carousel').each(function() {
         var $carousel = $(this);
         var $carousel = $(this);
         var $track = $carousel.find('.carousel-track');
         var $track = $carousel.find('.carousel-track');
         var $slides = $track.find('.carousel-slide');
         var $originalSlides = $track.find('.carousel-slide');
         var $dotsContainer = $carousel.find('.carousel-dots');
         var originalCount = $originalSlides.length;
        var $prevBtn = $carousel.find('.prev-btn');
        var $nextBtn = $carousel.find('.next-btn');
       
        var count = $slides.length;
        var currentIndex = 0;
        var timer; // 用于自动播放的计时器


         // 如果图片少于等于1张,隐藏所有控件,不启动轮播
         // 如果图太少,就不折腾了
         if (count <= 1) {
         if (originalCount <= 1) {
             $prevBtn.hide();
             $carousel.find('.carousel-btn, .carousel-dots').hide();
            $nextBtn.hide();
            $dotsContainer.hide();
             return;  
             return;  
         }
         }


         // --- 初始化 ---
         // 核心魔术:偷偷把第一张图复制一份放到最后
          
        var $firstClone = $originalSlides.first().clone();
         // 1. 动态生成底部圆点
        $track.append($firstClone);
         for (var i = 0; i < count; i++) {
 
        var $dotsContainer = $carousel.find('.carousel-dots');
        var currentIndex = 0;
        var isAnimating = false; // 防止你手速太快狂点按钮
         var timer;
 
         // 生成底部圆点
         for (var i = 0; i < originalCount; i++) {
             var $dot = $('<div class="dot"></div>');
             var $dot = $('<div class="dot"></div>');
             if (i === 0) $dot.addClass('active');
             if (i === 0) $dot.addClass('active');
第75行: 第74行:
         var $dots = $dotsContainer.find('.dot');
         var $dots = $dotsContainer.find('.dot');


         // --- 核心功能函数 ---
         // 更新圆点亮起状态
        function updateDots(index) {
            $dots.removeClass('active');
            if (index === originalCount) {
                $dots.eq(0).addClass('active'); // 如果滑到了假的第一张,亮起第一个圆点
            } else {
                $dots.eq(index).addClass('active');
            }
        }


         // 切换到指定幻灯片的函数
         // 滑动控制中心
         function goToSlide(index) {
         function goToSlide(index) {
             // 处理边界:如果小于0就跳到最后一张,如果超过最大就跳回第一张
            if (isAnimating) return;
            isAnimating = true;
 
             // 打开滑动动画
            $track.css('transition', 'transform 0.5s cubic-bezier(0.25, 1, 0.5, 1)');
 
            // 如果在第一张还往左点,先瞬间传送到最后一张,再往前滑
             if (index < 0) {
             if (index < 0) {
                 index = count - 1;
                 $track.css('transition', 'none');
             } else if (index >= count) {
                $track.css('transform', 'translateX(-' + (originalCount * 100) + '%)');
                 index = 0;
                $track[0].offsetHeight; // 强制系统反应一下
                $track.css('transition', 'transform 0.5s cubic-bezier(0.25, 1, 0.5, 1)');
                currentIndex = originalCount - 1;
             } else {
                 currentIndex = index;
             }
             }
           
 
            currentIndex = index;
           
            // 移动轨道
             var moveDistance = currentIndex * 100;
             var moveDistance = currentIndex * 100;
             $track.css('transform', 'translateX(-' + moveDistance + '%)');
             $track.css('transform', 'translateX(-' + moveDistance + '%)');
              
             updateDots(currentIndex);
             // 更新圆点状态
 
             $dots.removeClass('active');
             // 等动画播完(0.5秒),处理无缝衔接
            $dots.eq(currentIndex).addClass('active');
             setTimeout(function() {
                // 如果滑到了假的第一张,瞬间关掉动画,传回真正的第一张
                if (currentIndex === originalCount) {
                    $track.css('transition', 'none');
                    $track.css('transform', 'translateX(0)');
                    currentIndex = 0;
                }
                isAnimating = false;
            }, 500);
         }
         }


        // 启动/重置自动播放计时器的函数
         function startTimer() {
         function startTimer() {
             clearInterval(timer); // 清除旧的
             clearInterval(timer);
             timer = setInterval(function() {
             timer = setInterval(function() {
                 goToSlide(currentIndex + 1);
                 goToSlide(currentIndex + 1);
             }, 5000); // 5秒切换一次
             }, 5000); // 5秒自动切下一张
         }
         }


         // --- 事件监听 ---
         // 按钮点击事件
 
         $carousel.find('.next-btn').on('click', function() {
        // 点击下一张
         $nextBtn.on('click', function() {
             goToSlide(currentIndex + 1);
             goToSlide(currentIndex + 1);
             startTimer(); // 用户手动操作后,重置计时器
             startTimer();
         });
         });


        // 点击上一张
         $carousel.find('.prev-btn').on('click', function() {
         $prevBtn.on('click', function() {
             goToSlide(currentIndex - 1);
             goToSlide(currentIndex - 1);
             startTimer();
             startTimer();
         });
         });


        // 点击底部圆点
         $dots.on('click', function() {
         $dots.on('click', function() {
             var index = $(this).index(); // 获取点击的是第几个圆点
             if (isAnimating) return;
            goToSlide(index);
            goToSlide($(this).index());
             startTimer();
             startTimer();
         });
         });


        // --- 开始 ---
         startTimer();
         startTimer(); // 页面加载完成后启动自动播放
     });
     });
});
});

2026年2月24日 (二) 16:13的版本

/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */
/* 萌百风格 Tabs 自动转换脚本 */
$(function() {
    $('.Tabs').each(function() {
        var $tabsContainer = $(this);
        // 1. 检查是否已经初始化过
        if ($tabsContainer.hasClass('tabs-initialized')) return;

        // 2. 提取所有的标签和内容
        var $tabItems = $tabsContainer.find('> .Tab');
        if ($tabItems.length === 0) return;

        // 3. 创建标准的标签栏和内容容器
        var $labelWrapper = $('<div class="TabLabel"></div>');
        var $contentWrapper = $('<div class="TabContent"></div>');

        $tabItems.each(function(index) {
            var $item = $(this);
            var $label = $item.find('> .TabLabelText');
            var $content = $item.find('> .TabContentText');

            // 给第一个设为选中
            if (index === 0) {
                $label.addClass('selected');
                $content.addClass('selected');
            }

            // 绑定点击事件
            $label.on('click', function() {
                $labelWrapper.find('.TabLabelText').removeClass('selected');
                $contentWrapper.find('.TabContentText').removeClass('selected');
                $(this).addClass('selected');
                $content.addClass('selected');
            });

            $labelWrapper.append($label);
            $contentWrapper.append($content);
        });

        // 4. 清空原有的“散装”内容,插入标准结构
        $tabsContainer.empty().append($labelWrapper).append($contentWrapper).addClass('tabs-initialized');
    });
});

/* 首页智能无缝轮播图 */
mw.hook('wikipage.content').add(function($content) {
    $content.find('.dynamic-carousel').each(function() {
        var $carousel = $(this);
        var $track = $carousel.find('.carousel-track');
        var $originalSlides = $track.find('.carousel-slide');
        var originalCount = $originalSlides.length;

        // 如果图太少,就不折腾了
        if (originalCount <= 1) {
            $carousel.find('.carousel-btn, .carousel-dots').hide();
            return; 
        }

        // 核心魔术:偷偷把第一张图复制一份放到最后
        var $firstClone = $originalSlides.first().clone();
        $track.append($firstClone);

        var $dotsContainer = $carousel.find('.carousel-dots');
        var currentIndex = 0;
        var isAnimating = false; // 防止你手速太快狂点按钮
        var timer;

        // 生成底部圆点
        for (var i = 0; i < originalCount; i++) {
            var $dot = $('<div class="dot"></div>');
            if (i === 0) $dot.addClass('active');
            $dotsContainer.append($dot);
        }
        var $dots = $dotsContainer.find('.dot');

        // 更新圆点亮起状态
        function updateDots(index) {
            $dots.removeClass('active');
            if (index === originalCount) {
                $dots.eq(0).addClass('active'); // 如果滑到了假的第一张,亮起第一个圆点
            } else {
                $dots.eq(index).addClass('active');
            }
        }

        // 滑动控制中心
        function goToSlide(index) {
            if (isAnimating) return;
            isAnimating = true;

            // 打开滑动动画
            $track.css('transition', 'transform 0.5s cubic-bezier(0.25, 1, 0.5, 1)');

            // 如果在第一张还往左点,先瞬间传送到最后一张,再往前滑
            if (index < 0) {
                $track.css('transition', 'none');
                $track.css('transform', 'translateX(-' + (originalCount * 100) + '%)');
                $track[0].offsetHeight; // 强制系统反应一下
                $track.css('transition', 'transform 0.5s cubic-bezier(0.25, 1, 0.5, 1)');
                currentIndex = originalCount - 1;
            } else {
                currentIndex = index;
            }

            var moveDistance = currentIndex * 100;
            $track.css('transform', 'translateX(-' + moveDistance + '%)');
            updateDots(currentIndex);

            // 等动画播完(0.5秒),处理无缝衔接
            setTimeout(function() {
                // 如果滑到了假的第一张,瞬间关掉动画,传回真正的第一张
                if (currentIndex === originalCount) {
                    $track.css('transition', 'none');
                    $track.css('transform', 'translateX(0)');
                    currentIndex = 0;
                }
                isAnimating = false;
            }, 500);
        }

        function startTimer() {
            clearInterval(timer);
            timer = setInterval(function() {
                goToSlide(currentIndex + 1);
            }, 5000); // 5秒自动切下一张
        }

        // 按钮点击事件
        $carousel.find('.next-btn').on('click', function() {
            goToSlide(currentIndex + 1);
            startTimer();
        });

        $carousel.find('.prev-btn').on('click', function() {
            goToSlide(currentIndex - 1);
            startTimer();
        });

        $dots.on('click', function() {
            if (isAnimating) return;
            goToSlide($(this).index());
            startTimer();
        });

        startTimer();
    });
});