测试：修订间差异

来自SOKA CAFE
可视化wikitext
小
小
第16行： 第16行：
</div>
</div>
</div>
</div>
</div>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自适应轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
       
        body {
            background: transparent;
        }
       
        .container {
            position: absolute; /* 强制定位在左侧 */
            left: 0;
            width: 33.33vw; /* 电脑/平板端占屏幕1/3宽度 */
            max-width: 400px; /* 最大宽度限制 */
            min-width: 280px; /* 最小宽度 */
            height: auto;
            min-height: 120px;
            aspect-ratio: 2.03; /* 保持原有270/133≈2.03的比例 */
            margin: 20px 0 20px 0; /* 只在上下有外边距 */
            background: transparent; /* 去掉白色背景 */
            border-radius: 4px; /* 统一圆角为4px */
            padding: 0; /* 去掉内边距 */
            box-shadow: none; /* 去掉阴影 */
        }
       
        .carousel {
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 4px; /* 圆角统一为4px */
            overflow: hidden;
            background: transparent; /* 确保无背景 */
        }
       
        .carousel-wrapper {
            display: flex;
            width: 100%;
            height: 100%;
            transition: transform 0.5s ease;
            border-radius: 4px; /* 圆角统一为4px */
        }
       
        .carousel-item {
            flex: 0 0 100%;
            width: 100%;
            height: 100%;
        }
       
        .carousel-link {
            display: block;
            width: 100%;
            height: 100%;
        }
       
        .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 保持图片比例并填充容器 */
            object-position: center;
            border-radius: 6px; /* 图片圆角统一为4px */
        }
       
        .carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 36px;
            height: 36px;
            background: rgba(0,0,0,0.4);
            color: #fff;
            border: none;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }
       
        .carousel-btn:hover {
            background: rgba(0,0,0,0.6);
        }
       
        .prev-btn {
            left: 12px;
        }
       
        .next-btn {
            right: 12px;
        }
       
        .carousel-indicators {
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
        }
       
        .indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: all 0.3s;
        }
       
        .indicator.active {
            background: #fff;
            transform: scale(1.2);
        }
       
        /* 平板设备 - 保持1/3宽度 */
        @media (max-width: 1024px) {
            .container {
                width: 33.33vw; /* 平板端也占1/3宽度 */
                max-width: 350px;
            }
           
            .carousel-btn {
                width: 32px;
                height: 32px;
                font-size: 16px;
            }
        }
       
        /* 手机设备 - 恢复原始响应式设计 */
        @media (max-width: 768px) {
            .container {
                position: relative; /* 手机端恢复相对定位 */
                width: 92vw;
                max-width: 500px;
                margin: 15px auto; /* 手机端居中显示 */
            }
           
            .carousel {
                border-radius: 4px;
            }
           
            .carousel-btn {
                width: 28px;
                height: 28px;
                font-size: 14px;
                opacity: 0.9;
            }
           
            .prev-btn {
                left: 8px;
            }
           
            .next-btn {
                right: 8px;
            }
           
            .carousel-indicators {
                bottom: 10px;
            }
           
            .indicator {
                width: 8px;
                height: 8px;
            }
        }
       
        /* 小手机设备 */
        @media (max-width: 480px) {
            .container {
                width: 94vw;
                min-width: 260px;
                margin: 10px auto;
            }
           
            .carousel-btn {
                width: 24px;
                height: 24px;
                font-size: 12px;
            }
           
            .prev-btn {
                left: 5px;
            }
           
            .next-btn {
                right: 5px;
            }
           
            .indicator {
                width: 6px;
                height: 6px;
            }
        }
       
        /* 非常宽的屏幕限制最大宽度 */
        @media (min-width: 1600px) {
            .container {
                max-width: 500px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="carousel" id="carousel">
            <div class="carousel-wrapper" id="carouselWrapper">
                <div class="carousel-item">
                    <a href="https://soka.cafe/index.php?title=创学" class="carousel-link">
                        <img src="https://soka.cafe/Special:FilePath/解惑.jpg" alt="解惑">
                    </a>
                </div>
                <div class="carousel-item">
                    <a href="https://soka.cafe/index.php?title=维基观看与使用指南" class="carousel-link">
                        <img src="https://soka.cafe/Special:FilePath/导航1.1.jpg" alt="维基观看与使用指南">
                    </a>
                </div>
                <div class="carousel-item">
                    <a href="https://soka.cafe/index.php?title=入站须知" class="carousel-link">
                        <img src="https://soka.cafe/Special:FilePath/条责.jpg" alt="入站须知">
                    </a>
                </div>
            </div>
            <button class="carousel-btn prev-btn" id="prevBtn">&lt;</button>
            <button class="carousel-btn next-btn" id="nextBtn">&gt;</button>
            <div class="carousel-indicators" id="indicators"></div>
        </div>
    </div>
 
<script>
    const carouselWrapper = document.getElementById("carouselWrapper");
    const prevBtn = document.getElementById("prevBtn");
    const nextBtn = document.getElementById("nextBtn");
    const indicators = document.getElementById("indicators");
    const carouselItems = document.querySelectorAll(".carousel-item");
    const itemCount = carouselItems.length;
    let currentIndex = 0;
 
    function renderIndicators() {
        indicators.innerHTML = "";
        for (let i = 0; i < itemCount; i++) {
            const indicator = document.createElement("div");
            indicator.className = `indicator ${i === currentIndex ? "active" : ""}`;
            indicator.addEventListener("click", () => goToSlide(i));
            indicators.appendChild(indicator);
        }
    }
 
    function goToSlide(index) {
        currentIndex = index;
        carouselWrapper.style.transform = `translateX(-${currentIndex * 100}%)`;
        renderIndicators();
    }
 
    function prevSlide() {
        currentIndex = (currentIndex - 1 + itemCount) % itemCount;
        goToSlide(currentIndex);
    }
 
    function nextSlide() {
        currentIndex = (currentIndex + 1) % itemCount;
        goToSlide(currentIndex);
    }
 
    let autoPlay = setInterval(nextSlide, 5000);
    const carousel = document.getElementById("carousel");
   
    // 鼠标悬停时暂停自动播放
    carousel.addEventListener("mouseenter", () => clearInterval(autoPlay));
    carousel.addEventListener("mouseleave", () => {
        clearInterval(autoPlay);
        autoPlay = setInterval(nextSlide, 5000);
    });
   
    // 触摸设备支持
    let startX = 0;
    let endX = 0;
   
    carousel.addEventListener("touchstart", (e) => {
        startX = e.touches[0].clientX;
        clearInterval(autoPlay);
    });
   
    carousel.addEventListener("touchend", (e) => {
        endX = e.changedTouches[0].clientX;
        if (startX - endX > 50) {
            nextSlide(); // 向左滑动
        } else if (endX - startX > 50) {
            prevSlide(); // 向右滑动
        }
        autoPlay = setInterval(nextSlide, 5000);
    });
 
    prevBtn.addEventListener("click", prevSlide);
    nextBtn.addEventListener("click", nextSlide);
   
    // 初始化
    renderIndicators();
   
    // 窗口大小变化时重新计算
    window.addEventListener("resize", () => {
        // 重新定位当前幻灯片
        goToSlide(currentIndex);
    });
</script>
</body>
</html>
 
<div style="margin-top: 30px"></div>
<div style="margin-top: 30px"></div>
[[文件:萌新引导.png|330x330px|无框|左|link=森雅晴]]
[[文件:萌新引导.png|330x330px|无框|左|link=森雅晴]]

2026年1月27日 (二) 17:00的版本

欢迎来到「SOKA CAFE——エア本中文维基」
頭がパーン@wiki：中華エア本支部
◆ 本站点是以创价学会成员为核心、以创价学会及其相关团体为线索组织，进行讨论、研究和二次创作的公益性交流论坛维基百科网站。
◆ 本站点仅作记录和展示由宗教及相关人物衍生出的亚文化，非正式宗教维基，请注意！
◆ 本站点致力于营造和谐的社区环境，并热烈期待和欢迎任何人参与建设我们的网站！
◆ 本站点中所遇到的任何问题，均可通过下方信息联系我们。让我们一起共同来建设SOKA CAFE吧！
「よく来たわね、いらしゃい。」

本站点当前已有98个条目，3,154次编辑，2个活跃成员，上传了758个文件

自适应轮播图

Archive
📚 资料与档案
    • Creation
    🪶 二创与设定
    • Schedule
    🗓︎ 日程参照
    Question

    🧐 常见问题

    “创价学会”是什么？
    “久本雅美”是谁？
    “创价精神污染”是怎么个事？
    “五位数”是啥？为何颇具争议？

    Create

    💻 创建页面

    感谢您对SOKA CAFE的编辑贡献！但也请在过程中务必依照创作协议及版权，遵循CC BY-SA 3.0协议！

    准备好了？来尝试创建页面吧！
     
    Trivia

    ❓ 你知道吗

    「谁」是创价学会最神秘的男子?
    「谁」对自己年龄格外地在意?
    「谁」只因一顿就饭拐进了创价学会?

    Notice

    ⚠️ 入站须知

    Soka Cafe一直是一个合作性、公益性的网站，我们致力于营造和谐的社区环境，并热情地欢迎任何人参与我们之间的创作，不论您的信仰、外表、地域.... 为了打造一个和谐的、无骚扰的社区环境，请通读入站须知，了解网站的性质及规则。

    Plan

    📄 任务计划

    Soka Cafe的基本底层已大体完确！ 现在的最紧要的人物是登场作品分区的规范及完成度！这对创学新人入坑的帮助极其重要！ 没有相关技术不要紧，请使用“可视化编辑器”来进行编辑！如果有任何技术问题请在页面下方获取我们的联系方式！

    Website

    🛜 友情站点

    日本创价学会Wiki
    旧创价学会中文维基
    亚文化维基
    Cookie☆Wiki
    新哲学维基
    旧哲学维基
    潮学维基
    中文音MAD维基
    OTOMAD Libraries
    Aira软件库
    HUIJIA FUN - Plurimod学生会官方站点

    Contact

    📞 联系我们

    本站点以八叶莲华会社的名义设立，我们是中华阵营活跃的最大创价学会二创主题团体，欢迎各位对音MAD或AIR本文化感兴趣的各位加入我们团体！
    八叶莲华会社QQ群聊：3681760584
    八叶莲华会社QQ频道
    八叶莲华会社Discord频道
    前创价中文维基 群聊：1150098641
    创价学会资源QQ群：256770365

    取自“https://soka.cafe/index.php?title=测试&oldid=3102”