首页：修订间差异

来自SOKA CAFE
可视化wikitext
Banmad3n
Banmad3n（留言 | 贡献） （优化了大部分代码）
Banmad3n
Banmad3n（留言 | 贡献） （The bug Button Motion was refixed）
 
第33行： 第33行：
     <title>自适应轮播图</title>
     <title>自适应轮播图</title>
     <style>
     <style>
        /* ---------- Reset ---------- */
         * {
         * {
             margin: 0;
             margin: 0;
第44行： 第45行：
         }
         }


        /* ---------- Layout ---------- */
         .header-container {
         .header-container {
             width: 100%;
             width: 100%;
第62行： 第64行：
             background: transparent;
             background: transparent;
             border-radius: 4px;
             border-radius: 4px;
            padding: 0;
            box-shadow: none;
             overflow: hidden;
             overflow: hidden;
            margin: 0;
         }
         }


第96行： 第95行：
         }
         }


         @media (min-width: 1025px) {
         /* ---------- Carousel ---------- */
            .container {
                width: 30vw;
                max-width: none;
                min-width: auto;
            }
            .side-images-container {
                width: 35vw;
            }
            .header-container {
                padding-left: calc(50vw + 40px);
            }
        }
 
        @media (min-width: 769px) and (max-width: 1024px) {
            .container {
                width: 31vw;
                max-width: none;
                min-width: auto;
            }
            .side-images-container {
                width: 31vw;
            }
            .header-container {
                padding-left: calc(50vw + 30px);
            }
        }
 
        @media (max-width: 768px) {
            .carousel-section {
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 0;
                gap: 15px;
            }
            .container {
                width: 92vw;
                max-width: 310px;
                margin: 0;
            }
            .side-images-container {
                width: 92vw;
                max-width: 310px;
                gap: 15px;
            }
            .header-container {
                padding-left: 0;
                text-align: center;
            }
        }
 
        @media (max-width: 480px) {
            .container {
                width: 94vw;
                min-width: 260px;
                margin: 0;
            }
            .side-images-container {
                width: 94vw;
                min-width: 260px;
            }
        }
 
         .carousel {
         .carousel {
             position: relative;
             position: relative;
第172行： 第108行：
             width: 100%;
             width: 100%;
             height: 100%;
             height: 100%;
             transition: transform 0.5s ease;
             transition: transform 0.5s ease; /* 图片切换过渡，保留 */
         }
         }


第199行： 第135行：
         }
         }


        .carousel-btn {
/* 箭头按钮：完全重置浏览器默认样式，避免按下时位移 */
            position: absolute;
.carousel-btn {
            top: 50%;
    position: absolute;
            transform: translateY(-50%);
    top: 50%;
            width: 36px;
    transform: translateY(-50%);
            height: 36px;
    width: clamp(24px, 3.2vw, 36px);
            background: rgba(0,0,0,0.4);
    height: clamp(24px, 3.2vw, 36px);
            color: #fff;
    background: rgba(0, 0, 0, 0.4);
            border: none;
    color: #fff;
            border-radius: 50%;
    border: none;
            font-size: 18px;
    outline: none;
            cursor: pointer;
    border-radius: 50%;
            z-index: 10;
    font-size: clamp(12px, 1.6vw, 18px);
            display: flex;
    line-height: 1;
            align-items: center;
    padding: 0;
            justify-content: center;
    margin: 0;
            transition: background 0.3s;
    cursor: pointer;
        }
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
}


        .carousel-btn:hover {
.carousel-btn:hover,
            background: rgba(0,0,0,0.6);
.carousel-btn:active,
        }
.carousel-btn:focus {
    background: rgba(0, 0, 0, 0.6);
    outline: none;
    box-shadow: none;
    transform: translateY(-50%); /* 强制固定，防止按下时产生位移 */
}


         .prev-btn {
         .prev-btn { left: clamp(5px, 1vw, 12px); }
            left: 12px;
         .next-btn { right: clamp(5px, 1vw, 12px); }
        }
 
         .next-btn {
            right: 12px;
        }


         .carousel-indicators {
         .carousel-indicators {
第243行： 第188行：
             height: 10px;
             height: 10px;
             border-radius: 50%;
             border-radius: 50%;
             background: rgba(255,255,255,0.5);
             background: rgba(255, 255, 255, 0.5);
             cursor: pointer;
             cursor: pointer;
            transition: all 0.3s;
         }
         }


         .indicator.active {
         .indicator.active {
             background: #fff;
             background: #fff;
            transform: scale(1.2);
         }
         }


         @media (max-width: 1024px) {
         @media (max-width: 768px) {
             .carousel-btn {
             .carousel-indicators { bottom: 10px; }
                width: 32px;
            .indicator { width: 8px; height: 8px; }
                height: 32px;
        }
                font-size: 16px;
 
             }
        @media (max-width: 480px) {
            .indicator { width: 6px; height: 6px; }
        }
 
        /* ---------- 响应式容器宽度 ---------- */
        @media (min-width: 1025px) {
            .container { width: 30vw; }
             .side-images-container { width: 35vw; }
            .header-container { padding-left: calc(50vw + 40px); }
        }
 
        @media (min-width: 769px) and (max-width: 1024px) {
            .container { width: 31vw; }
            .side-images-container { width: 31vw; }
            .header-container { padding-left: calc(50vw + 30px); }
         }
         }


         @media (max-width: 768px) {
         @media (max-width: 768px) {
             .carousel-btn {
             .carousel-section {
                 width: 28px;
                 flex-direction: column;
                 height: 28px;
                 align-items: center;
                 font-size: 14px;
                 padding: 0;
                 opacity: 0.9;
                 gap: 15px;
             }
             }
             .prev-btn {
             .container {
                 left: 8px;
                 width: 92vw;
                max-width: 310px;
             }
             }
             .next-btn {
             .side-images-container {
                 right: 8px;
                 width: 92vw;
                max-width: 310px;
                gap: 15px;
             }
             }
             .carousel-indicators {
             .header-container {
                 bottom: 10px;
                 padding-left: 0;
            }
                 text-align: center;
            .indicator {
                 width: 8px;
                height: 8px;
             }
             }
         }
         }


         @media (max-width: 480px) {
         @media (max-width: 480px) {
             .carousel-btn {
             .container { width: 94vw; min-width: 260px; }
                width: 24px;
             .side-images-container { width: 94vw; min-width: 260px; }
                height: 24px;
                font-size: 12px;
            }
             .prev-btn {
                left: 5px;
            }
            .next-btn {
                right: 5px;
            }
            .indicator {
                width: 6px;
                height: 6px;
            }
         }
         }


        /* ---------- 标题 ---------- */
         .main-title {
         .main-title {
             font-size: min(4vw, 26px);
             font-size: min(4vw, 26px);
第312行： 第257行：
         .sub-title {
         .sub-title {
             font-size: min(3vw, 18px);
             font-size: min(3vw, 18px);
             margin-bottom: 15px;
             margin: 10px 0 15px;
             text-align: left;
             text-align: left;
            margin-top: 10px;
             padding: 0 10px;
             padding: 0 10px;
             color: #666;
             color: #666;
第320行： 第264行：


         @media (max-width: 768px) {
         @media (max-width: 768px) {
             .main-title, .sub-title {
             .main-title, .sub-title { text-align: center; }
                text-align: center;
            }
         }
         }


         /* 图片淡入：默认透明，加载后由脚本置 1，避免闪烁 */
         /* ---------- 图片淡入动画（保留） ---------- */
         .carousel-item img, .side-image-item img {
         .carousel-item img, .side-image-item img {
             opacity: 0;
             opacity: 0;
第374行： 第316行：


<script>
<script>
    const carouselWrapper = document.getElementById("carouselWrapper");
(function () {
     const prevBtn = document.getElementById("prevBtn");
     const carousel = document.getElementById("carousel");
     const nextBtn = document.getElementById("nextBtn");
     const wrapper = document.getElementById("carouselWrapper");
     const indicators = document.getElementById("indicators");
     const indicators = document.getElementById("indicators");
     const carouselItems = document.querySelectorAll(".carousel-item");
     const items = document.querySelectorAll(".carousel-item");
     const itemCount = carouselItems.length;
     const itemCount = items.length;
     let currentIndex = 0;
     let currentIndex = 0;
    let autoPlay;


     function renderIndicators() {
     function renderIndicators() {
         indicators.innerHTML = "";
         indicators.innerHTML = "";
         for (let i = 0; i < itemCount; i++) {
         for (let i = 0; i < itemCount; i++) {
             const indicator = document.createElement("div");
             const dot = document.createElement("div");
             indicator.className = `indicator ${i === currentIndex ? "active" : ""}`;
             dot.className = `indicator ${i === currentIndex ? "active" : ""}`;
             indicator.addEventListener("click", () => goToSlide(i));
             dot.addEventListener("click", () => goToSlide(i));
             indicators.appendChild(indicator);
             indicators.appendChild(dot);
         }
         }
     }
     }
第394行： 第337行：
     function goToSlide(index) {
     function goToSlide(index) {
         currentIndex = index;
         currentIndex = index;
         carouselWrapper.style.transform = `translateX(-${currentIndex * 100}%)`;
         wrapper.style.transform = `translateX(-${currentIndex * 100}%)`;
         renderIndicators();
         renderIndicators();
    }
    function nextSlide() {
        goToSlide((currentIndex + 1) % itemCount);
     }
     }


     function prevSlide() {
     function prevSlide() {
         currentIndex = (currentIndex - 1 + itemCount) % itemCount;
         goToSlide((currentIndex - 1 + itemCount) % itemCount);
        goToSlide(currentIndex);
     }
     }


     function nextSlide() {
     function startAutoPlay() {
         currentIndex = (currentIndex + 1) % itemCount;
         autoPlay = setInterval(nextSlide, 5000);
        goToSlide(currentIndex);
     }
     }


     let autoPlay = setInterval(nextSlide, 5000);
     function restartAutoPlay() {
    const carousel = document.getElementById("carousel");
        clearInterval(autoPlay);
        startAutoPlay();
    }


     carousel.addEventListener("mouseenter", () => clearInterval(autoPlay));
     carousel.addEventListener("mouseenter", () => clearInterval(autoPlay));
     carousel.addEventListener("mouseleave", () => {
     carousel.addEventListener("mouseleave", restartAutoPlay);
        clearInterval(autoPlay);
        autoPlay = setInterval(nextSlide, 5000);
    });


     let startX = 0;
     let startX = 0;
    let endX = 0;
     carousel.addEventListener("touchstart", (e) => {
     carousel.addEventListener("touchstart", (e) => {
         startX = e.touches[0].clientX;
         startX = e.touches[0].clientX;
第426行： 第368行：


     carousel.addEventListener("touchend", (e) => {
     carousel.addEventListener("touchend", (e) => {
         endX = e.changedTouches[0].clientX;
         const diff = startX - e.changedTouches[0].clientX;
         if (startX - endX > 50) {
         if (diff > 50) nextSlide();
            nextSlide();
         else if (diff < -50) prevSlide();
         } else if (endX - startX > 50) {
         restartAutoPlay();
            prevSlide();
         }
        autoPlay = setInterval(nextSlide, 5000);
     }, { passive: true });
     }, { passive: true });


     prevBtn.addEventListener("click", prevSlide);
     document.getElementById("prevBtn").addEventListener("click", prevSlide);
     nextBtn.addEventListener("click", nextSlide);
     document.getElementById("nextBtn").addEventListener("click", nextSlide);


     renderIndicators();
     window.addEventListener("resize", () => goToSlide(currentIndex));


     window.addEventListener("resize", () => {
     // 图片淡入：已缓存的立即显示，未加载完成的等待 load/error
        goToSlide(currentIndex);
    document.querySelectorAll(".carousel-item img, .side-image-item img").forEach((img) => {
        if (img.complete) {
            img.style.opacity = "1";
        } else {
            img.addEventListener("load", () => { img.style.opacity = "1"; });
            img.addEventListener("error", () => { img.style.opacity = "1"; });
        }
     });
     });


     // 图片淡入：每张图独立处理，已缓存的立即显示
     renderIndicators();
    function fadeInImages() {
    startAutoPlay();
        const images = document.querySelectorAll('.carousel-item img, .side-image-item img');
})();
        images.forEach(img => {
            if (img.complete) {
                img.style.opacity = '1';
            } else {
                img.addEventListener('load', () => { img.style.opacity = '1'; });
                img.addEventListener('error', () => { img.style.opacity = '1'; });
            }
        });
    }
    fadeInImages();
</script>
</script>
</body>
</body>
第777行： 第712行：
[https://www.otomads.top OTOMAD Libraries]<br>
[https://www.otomads.top OTOMAD Libraries]<br>
[https://sakuranomiyaaira-my.sharepoint.com/:f:/g/personal/aira_sakuranomiyaaira_onmicrosoft_com/EupwfzfUz8VNqhS_YWGToesBkfn_bfGZPeqpbrcVQMsPgA Aira软件库]<br>
[https://sakuranomiyaaira-my.sharepoint.com/:f:/g/personal/aira_sakuranomiyaaira_onmicrosoft_com/EupwfzfUz8VNqhS_YWGToesBkfn_bfGZPeqpbrcVQMsPgA Aira软件库]<br>
[https://huijia.fun/%E9%A6%96%E9%A1%B5 HUIJIA FUN - Plurimod学生会官方站点]
</div>
</div>
<div class="mini-block">
<div class="mini-block">

2026年8月8日 (六) 17:23的最新版本

— SOKA CAFE —「エア本中文维基」
頭がパーン@wiki：中華エア本支部 ▼
頭がパーン@wiki：中華エア本支部 ▲

◆ 本站点是以创价学会成员为核心、以创价学会及其相关团体为线索组织，进行讨论、研究和二次创作的公益性交流论坛维基百科网站，欢迎您的访问！

◆ 本站点致力于营造和谐的社区环境，欢迎任何人前来参与和建设。让我们一起共同来建设SOKA CAFE吧！
◆ 本站点仅作记录和展示由创价学会及相关人物所衍生出的亚文化，并非正式宗教维基，请注意！

「よく来たわね、いらしゃい。」
当前已有102个条目，3,411次编辑，2个活跃成员，上传了798个文件。

自适应轮播图

历史
公告

Archive
📚 资料与档案
    • Creation
    🪶 术语与设定
    • Schedule
    🗓︎ 日程参照
    2026年08月09日|13:03, 周日
    🎉 本月生日的人员

    · 8月13日 ·
    Question

    🧐 常见问题

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

    Create

    💻 创建页面

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

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

    ❓ 你知道吗

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

    Notice

    ⚠️ 入站须知

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

    Plan

    📄 任务计划

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

    Website

    🛜 友情站点

    百度创价学会贴吧
    创价日文Wiki
    导师日文wiki
    哲学中文维基
    旧哲学中文维基
    潮学维基
    亚文化维基
    中文音MAD维基
    OTOMAD Libraries
    Aira软件库

    Contact

    📞 联系我们

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

    取自“https://soka.cafe/index.php?title=首页&oldid=3351”