MediaWiki:Common.js：修订间差异

2025年5月1日 (四) 19:27的版本

/**
 * MediaWiki轮播图JavaScript
 * 为轮播图提供交互功能
 */
/* 轮播图功能 */
mw.hook('wikipage.content').add(function($content) {
  // 查找页面中所有轮播图
  $content.find('.wiki-carousel').each(function() {
    const carousel = $(this);
    const slides = carousel.find('.wiki-carousel-slide');
    const slideContainer = carousel.find('.wiki-carousel-slides');
    const prevBtn = carousel.find('.wiki-carousel-prev');
    const nextBtn = carousel.find('.wiki-carousel-next');
    const indicators = carousel.find('.wiki-carousel-indicators');
    
    // 检查图片是否加载
    slides.each(function() {
      const slide = $(this);
      const imgElement = slide.find('.wiki-carousel-slide-image');
      const imgSrc = imgElement.attr('data-image');
      
      // 如果背景图片样式没有被应用，尝试另一种方式
      if (!imgElement.css('background-image') || imgElement.css('background-image') === 'none') {
        imgElement.css('background-image', 'url(' + imgSrc + ')');
      }
    });
    
    let currentIndex = 0;
    let autoplayInterval = null;
    const slideCount = slides.length;
    
    if (slideCount === 0) return;
    
    // 创建指示器
    for (let i = 0; i < slideCount; i++) {
      const indicator = $('<div class="wiki-carousel-indicator"></div>');
      if (i === 0) indicator.addClass('active');
      
      indicator.on('click', function() {
        goToSlide(i);
      });
      
      indicators.append(indicator);
    }
    
    // 初始化轮播图状态
    updateCarousel();
    
    // 自动播放
    startAutoplay();
    
    // 绑定按钮事件
    prevBtn.on('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      prevSlide();
    });
    
    nextBtn.on('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      nextSlide();
    });
    
    // 上一张
    function prevSlide() {
      currentIndex = (currentIndex - 1 + slides.length) % slides.length;
      updateCarousel();
      resetAutoplay();
    }
    
    // 下一张
    function nextSlide() {
      currentIndex = (currentIndex + 1) % slides.length;
      updateCarousel();
      resetAutoplay();
    }
    
    // 切换到指定幻灯片
    function goToSlide(index) {
      currentIndex = index;
      updateCarousel();
      resetAutoplay();
    }
    
    // 鼠标悬停事件
    carousel.on('mouseenter', function() {
      stopAutoplay();
    });
    
    carousel.on('mouseleave', function() {
      startAutoplay();
    });
    
    // 为每个幻灯片添加鼠标悬停和点击事件
    slides.each(function(index) {
      const slide = $(this);
      const link = slide.find('.wiki-carousel-slide-link').attr('href');
      
      // 鼠标悬停事件
      slide.on('mouseenter', function() {
        goToSlide(index);
        stopAutoplay();
      });
      
      // 如果有链接，添加点击事件
      if (link && link.length > 0) {
        slide.find('.wiki-carousel-slide-inner').css('cursor', 'pointer').on('click', function() {
          window.location.href = link;
        });
      }
    });
    
    // 触摸事件支持
    let touchStartX = 0;
    carousel.on('touchstart', function(e) {
      touchStartX = e.originalEvent.touches[0].clientX;
      stopAutoplay();
    });
    
    carousel.on('touchend', function(e) {
      const touchEndX = e.originalEvent.changedTouches[0].clientX;
      const diff = touchEndX - touchStartX;
      
      if (diff > 50) {
        // 向右滑动，显示上一张
        prevSlide();
      } else if (diff < -50) {
        // 向左滑动，显示下一张
        nextSlide();
      }
      
      startAutoplay();
    });
    
    // 更新轮播图显示
    function updateCarousel() {
      slides.removeClass('active');
      indicators.find('.wiki-carousel-indicator').removeClass('active');
      
      slides.css('transform', `translateX(-${currentIndex * 100}%)`);
      slides.eq(currentIndex).addClass('active');
      indicators.find('.wiki-carousel-indicator').eq(currentIndex).addClass('active');
    }
    
    // 启动自动播放
    function startAutoplay() {
      if (autoplayInterval === null) {
        autoplayInterval = setInterval(function() {
          nextSlide();
        }, 5000); // 5秒切换一次
      }
    }
    
    // 停止自动播放
    function stopAutoplay() {
      if (autoplayInterval !== null) {
        clearInterval(autoplayInterval);
        autoplayInterval = null;
      }
    }
    
    // 重置自动播放
    function resetAutoplay() {
      stopAutoplay();
      startAutoplay();
    }
  });
});