测试1：修订间差异

来自广州交通维基 - Canton Trans Wiki
跳到导航 跳到搜索
无编辑摘要
无编辑摘要
 
第35行： 第35行：
    <button class="carousel-btn prev" style="position: absolute; top: 50%; left: 10px; transform: translateY(-50%); padding: 15px; background: rgba(0,0,0,0.5); color: white; border: none; cursor: pointer; z-index: 10;">&lt;</button>
    <button class="carousel-btn prev" style="position: absolute; top: 50%; left: 10px; transform: translateY(-50%); padding: 15px; background: rgba(0,0,0,0.5); color: white; border: none; cursor: pointer; z-index: 10;">&lt;</button>
    <button class="carousel-btn next" style="position: absolute; top: 50%; right: 10px; transform: translateY(-50%); padding: 15px; background: rgba(0,0,0,0.5); color: white; border: none; cursor: pointer; z-index: 10;">&gt;</button>
    <button class="carousel-btn next" style="position: absolute; top: 50%; right: 10px; transform: translateY(-50%); padding: 15px; background: rgba(0,0,0,0.5); color: white; border: none; cursor: pointer; z-index: 10;">&gt;</button>
   <style>
     /* 轮播基础样式 */
     .carousel-slides {
       display: flex;
       transition: transform 0.5s ease;
       width: 100%;
     }
     .carousel-slide {
       min-width: 100%;
       box-sizing: border-box;
     }
     /* 按钮hover效果 */
     .carousel-btn:hover {
       background: rgba(0,0,0,0.8);
     }
     /* 响应式适配 */
     @media (max-width: 768px) {
       .carousel-btn {
         padding: 10px;
         font-size: 14px;
       }
       .carousel-caption {
         font-size: 14px;
       }
     }
   </style>
   <script>
     // 核心轮播逻辑
     const slides = document.querySelectorAll('.carousel-slide');
     const slideContainer = document.querySelector('.carousel-slides');
     const prevBtn = document.querySelector('.prev');
     const nextBtn = document.querySelector('.next');
     const carouselContainer = document.getElementById('carousel-container');
     let currentSlide = 0;
     const slideCount = slides.length;
     const intervalTime = 3000; // 轮播间隔3秒
     let autoPlayInterval;
     // 更新轮播显示
     function updateSlidePosition() {
       slideContainer.style.transform = `translateX(-${currentSlide * 100}%)`;
     }
     // 下一张
     function nextSlide() {
       currentSlide = (currentSlide + 1) % slideCount;
       updateSlidePosition();
     }
     // 上一张
     function prevSlide() {
       currentSlide = (currentSlide - 1 + slideCount) % slideCount;
       updateSlidePosition();
     }
     // 自动播放
     function startAutoPlay() {
       autoPlayInterval = setInterval(nextSlide, intervalTime);
     }
     // 暂停自动播放
     function stopAutoPlay() {
       clearInterval(autoPlayInterval);
     }
     // 绑定按钮事件
     prevBtn.addEventListener('click', prevSlide);
     nextBtn.addEventListener('click', nextSlide);
     // 鼠标悬停暂停，离开继续
     carouselContainer.addEventListener('mouseenter', stopAutoPlay);
     carouselContainer.addEventListener('mouseleave', startAutoPlay);
     // 初始化
     updateSlidePosition();
     startAutoPlay();
   </script>
</div>

2025年12月25日 (四) 22:55的最新版本

取自“https://t.ctwiki.top/index.php?title=测试1&oldid=282362”