MediaWiki:Common.js
来自Age Of History 2 Chinese Wiki
注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5或Ctrl-R(Mac为⌘-R)
- Google Chrome:按Ctrl-Shift-R(Mac为⌘-Shift-R)
- Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5。
/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */ /* 轮播图功能 */ mw.hook('wikipage.content').add(function($content) { // 查找页面中所有轮播图 $content.find('.mw-carousel').each(function() { const $carousel = $(this); const $items = $carousel.find('.carousel-item'); const $indicators = $carousel.find('.carousel-indicators'); const $prevBtn = $carousel.find('.carousel-prev'); const $nextBtn = $carousel.find('.carousel-next'); let currentIndex = 0; const slideCount = $items.length; if (slideCount === 0) return; // 创建指示器 for (let i = 0; i < slideCount; i++) { const $indicator = $('<div class="indicator"></div>'); if (i === 0) $indicator.addClass('active'); $indicator.on('click', function() { goToSlide(i); }); $indicators.append($indicator); } // 初始化第一张幻灯片 $items.eq(0).addClass('active'); // 给每个幻灯片添加点击事件 $items.each(function() { const $item = $(this); const link = $item.data('link'); if (link && link.length > 0) { $item.css('cursor', 'pointer').on('click', function() { window.location.href = link; }); } }); // 切换到指定幻灯片 function goToSlide(index) { $items.removeClass('active'); $indicators.find('.indicator').removeClass('active'); $items.eq(index).addClass('active'); $indicators.find('.indicator').eq(index).addClass('active'); currentIndex = index; } // 上一张 function prevSlide() { const newIndex = (currentIndex - 1 + slideCount) % slideCount; goToSlide(newIndex); } // 下一张 function nextSlide() { const newIndex = (currentIndex + 1) % slideCount; goToSlide(newIndex); } // 绑定按钮事件 $prevBtn.on('click', function(e) { e.preventDefault(); e.stopPropagation(); prevSlide(); }); $nextBtn.on('click', function(e) { e.preventDefault(); e.stopPropagation(); nextSlide(); }); // 自动播放 let autoplayInterval = setInterval(nextSlide, 5000); $carousel.on('mouseenter', function() { clearInterval(autoplayInterval); }).on('mouseleave', function() { autoplayInterval = setInterval(nextSlide, 5000); }); // 触摸滑动支持 let touchStartX = 0; let touchEndX = 0; $carousel.on('touchstart', function(e) { touchStartX = e.originalEvent.touches[0].clientX; }); $carousel.on('touchend', function(e) { touchEndX = e.originalEvent.changedTouches[0].clientX; // 判断滑动方向 if (touchEndX < touchStartX - 50) { nextSlide(); // 左滑,下一张 } else if (touchEndX > touchStartX + 50) { prevSlide(); // 右滑,上一张 } }); }); });
Loading comments...