MediaWiki:Common.js:修订间差异
来自Age Of History 2 Chinese Wiki
无编辑摘要 |
无编辑摘要 |
||
第1行: | 第1行: | ||
// | /* 轮播图功能 */ | ||
mw.hook('wikipage.content').add(function() { | 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'); | |||
const | |||
const | |||
const | |||
const | |||
let currentIndex = 0; | 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 ( | 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(); // 右滑,上一张 | |||
} | |||
}); | }); | ||
}); | }); | ||
} | }); |
2025年5月1日 (四) 19:57的版本
/* 轮播图功能 */
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(); // 右滑,上一张
}
});
});
});