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...