MediaWiki:Carousel.js

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
$(function() {
    $('.carousel-container').each(function() {
        var $container = $(this);
        var $wrapper = $container.find('.carousel-wrapper');
        var $slides = $container.find('.carousel-slide');
        var $titleItems = $container.find('.carousel-title-item');
        var slideCount = $slides.length;
        var currentSlide = 0;
        var autoPlayInterval;
        var isTransitioning = false;
        
        // 切换到指定幻灯片
        function goToSlide(index) {
            if (isTransitioning) return;
            
            if (index < 0) index = slideCount - 1;
            if (index >= slideCount) index = 0;
            
            isTransitioning = true;
            currentSlide = index;
            $wrapper.css('transform', 'translateX(-' + (index * 100) + '%)');
            
            // 更新标题状态
            $titleItems.each(function(i) {
                var $item = $(this);
                var $text = $item.find('.title-text');
                var $indicator = $item.find('.title-indicator');
                
                if (i === index) {
                    $item.addClass('active');
                    $text.css('opacity', '1').css('font-weight', 'bold');
                    $indicator.css('background', '#ff6600');
                } else {
                    $item.removeClass('active');
                    $text.css('opacity', '0.7').css('font-weight', 'normal');
                    $indicator.css('background', 'transparent');
                }
            });
            
            setTimeout(function() {
                isTransitioning = false;
            }, 500);
        }
        
        // 下一张
        function nextSlide() {
            goToSlide(currentSlide + 1);
        }
        
        // 上一张
        function prevSlide() {
            goToSlide(currentSlide - 1);
        }
        
        // 自动播放
        function startAutoPlay() {
            autoPlayInterval = setInterval(nextSlide, 10000);
        }
        
        // 停止自动播放
        function stopAutoPlay() {
            clearInterval(autoPlayInterval);
        }
        
        // 绑定左右切换按钮事件（处理图片点击）
        $container.find('.carousel-next').click(function(e) {
            e.preventDefault();
            e.stopPropagation();
            stopAutoPlay();
            nextSlide();
            startAutoPlay();
        });
        
        $container.find('.carousel-prev').click(function(e) {
            e.preventDefault();
            e.stopPropagation();
            stopAutoPlay();
            prevSlide();
            startAutoPlay();
        });
        
        // 防止按钮内的图片链接跳转
        $container.find('.carousel-btn img, .carousel-btn a').click(function(e) {
            e.preventDefault();
            return false;
        });
        
        // 绑定标题点击事件
        $titleItems.click(function() {
            var slideIndex = parseInt($(this).attr('data-slide'));
            stopAutoPlay();
            goToSlide(slideIndex);
            startAutoPlay();
        });
        
        // 鼠标悬停在容器时暂停
        $container.hover(
            function() { stopAutoPlay(); },
            function() { startAutoPlay(); }
        );
        
        // 触摸滑动支持（移动设备）
        var touchStartX = 0;
        var touchEndX = 0;
        
        $container.on('touchstart', function(e) {
            touchStartX = e.originalEvent.changedTouches[0].screenX;
        });
        
        $container.on('touchend', function(e) {
            touchEndX = e.originalEvent.changedTouches[0].screenX;
            handleSwipe();
        });
        
        function handleSwipe() {
            if (touchEndX < touchStartX - 50) {
                stopAutoPlay();
                nextSlide();
                startAutoPlay();
            }
            if (touchEndX > touchStartX + 50) {
                stopAutoPlay();
                prevSlide();
                startAutoPlay();
            }
        }
        
        // 键盘控制
        $(document).keydown(function(e) {
            if ($container.is(':hover')) {
                if (e.keyCode === 37) { // 左箭头
                    stopAutoPlay();
                    prevSlide();
                    startAutoPlay();
                } else if (e.keyCode === 39) { // 右箭头
                    stopAutoPlay();
                    nextSlide();
                    startAutoPlay();
                }
            }
        });
        
        // 启动自动播放
        if (slideCount > 1) {
            startAutoPlay();
        }
    });
});
MediaWiki

MediaWiki:Carousel.js

来自卡厄思梦境WIKI
