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(); // 右滑,上一张 } }); }); });