MediaWiki:Gadget-FloatAd.js

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。

/* 右下角悬浮广告 - 自动轮播升级版 */
$(function() {
    // 1. 基本检查：只在阅读模式显示
    if (mw.config.get('wgAction') !== 'view') return;

    // ==========================================
    // 📢 广告配置区 (在这里修改你的广告)
    // ==========================================
    var adList = [
        {
            // 第 1 个广告
            image: "https://cdn.jsdelivr.net/gh/KKBlockE/BlocklandPicturebed@main/main/57c28632646090b90ade3254617ef4a1.png", 
            link: "/wiki/南北绿豆",
            title: "加入帝国，前程无忧！" 
        },
        {
            // 第 2 个广告 (你可以复制这块加更多)
            image: "https://cdn.jsdelivr.net/gh/KKBlockE/BlocklandPicturebed@main/main/20260110211930329.png", 
            link: "/wiki/核蛋",
            title: "嘎嘎嘎"
        }
    ];

    var switchTime = 5000; // 轮播间隔 (毫秒)，这里是 5 秒换一次
    var adWidth = "220px"; // 广告宽度

    // ==========================================
    // ⚙️ 核心逻辑 (不用改)
    // ==========================================
    
    // 如果没有广告，直接退出
    if (adList.length === 0) return;

    // 初始化：随机选一个开始
    var currentIndex = Math.floor(Math.random() * adList.length);
    var timer = null;

    // 创建广告容器
    var $adContainer = $('<div id="my-float-ad">')
        .css({
            "position": "fixed",
            "bottom": "20px",
            "right": "20px",
            "width": adWidth,
            "z-index": "9999",
            "cursor": "pointer",
            "transition": "opacity 0.5s" // 整体透明度过渡
        });

    // 关闭按钮
    var $closeBtn = $('<span style="position:absolute; top:-10px; right:-10px; background:#ff4d4d; color:white; width:20px; height:20px; text-align:center; line-height:20px; border-radius:50%; font-size:14px; box-shadow:0 2px 5px rgba(0,0,0,0.3); z-index:10;">×</span>')
        .click(function(e) {
            e.stopPropagation();
            clearInterval(timer); // 关闭时清除定时器
            $('#my-float-ad').fadeOut(); 
        });

    // 广告图片和链接
    var $adLink = $('<a>').attr('href', adList[currentIndex].link).attr('title', adList[currentIndex].title);
    var $adImg = $('<img>').attr('src', adList[currentIndex].image).css({
        "width": "100%",
        "border-radius": "8px",
        "box-shadow": "0 4px 15px rgba(0,0,0,0.5)",
        "border": "2px solid #fff",
        "transition": "opacity 0.3s ease-in-out" // 图片切换动画
    });

    // 组装
    $adLink.append($adImg);
    $adContainer.append($closeBtn).append($adLink);
    $('body').append($adContainer);

    // 核心：切换广告的函数
    function nextAd() {
        // 1. 先淡出
        $adImg.css('opacity', '0.2');
        
        setTimeout(function() {
            // 2. 切换数据
            currentIndex = (currentIndex + 1) % adList.length; // 循环索引
            var nextItem = adList[currentIndex];
            
            $adImg.attr('src', nextItem.image);
            $adLink.attr('href', nextItem.link).attr('title', nextItem.title);
            
            // 3. 再淡入
            $adImg.css('opacity', '1');
        }, 300); // 等 0.3秒淡出动画做完再切图
    }

    // 启动定时器
    timer = setInterval(nextAd, switchTime);

    // 鼠标放上去时暂停轮播，移开继续
    $adContainer.hover(
        function() { clearInterval(timer); }, // 鼠标移入：停
        function() { timer = setInterval(nextAd, switchTime); } // 鼠标移出：跑
    );
});