MediaWiki:Common.js:修订间差异
来自Age Of History 2 Chinese Wiki
无编辑摘要 |
无编辑摘要 |
||
第104行: | 第104行: | ||
} | } | ||
}); | }); | ||
}); | |||
}); | |||
// Collapsible blocks functionality | |||
$(document).ready(function() { | |||
// Initialize collapsible blocks | |||
$('.collapsible-header').click(function() { | |||
$(this).next('.collapsible-content').slideToggle(); | |||
$(this).toggleClass('active'); | |||
}); | |||
// Initially hide collapsible content | |||
$('.collapsible-content').hide(); | |||
// Carousel functionality | |||
// This would need to be expanded based on your complex SCSS carousel | |||
// For now, a simple interval-based switch | |||
$('.carousel-container').each(function() { | |||
const $carousel = $(this); | |||
const $slides = $carousel.find('.rolling a'); | |||
const slideCount = $slides.length; | |||
let currentSlide = 0; | |||
// Hide all slides except the first one | |||
$slides.css('left', '100%').eq(0).css('left', '0'); | |||
// Only set up carousel if there are multiple slides | |||
if (slideCount > 1) { | |||
setInterval(function() { | |||
let nextSlide = (currentSlide + 1) % slideCount; | |||
// Move current slide out | |||
$slides.eq(currentSlide).animate({left: '-100%'}, 500); | |||
// Move next slide in | |||
$slides.eq(nextSlide).css('left', '100%').animate({left: '0'}, 500); | |||
currentSlide = nextSlide; | |||
}, 5000); // Change slide every 5 seconds | |||
} | |||
}); | }); | ||
}); | }); |
2025年5月2日 (五) 17:20的版本
/* 轮播图功能 */
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(); // 右滑,上一张
}
});
});
});
// Collapsible blocks functionality
$(document).ready(function() {
// Initialize collapsible blocks
$('.collapsible-header').click(function() {
$(this).next('.collapsible-content').slideToggle();
$(this).toggleClass('active');
});
// Initially hide collapsible content
$('.collapsible-content').hide();
// Carousel functionality
// This would need to be expanded based on your complex SCSS carousel
// For now, a simple interval-based switch
$('.carousel-container').each(function() {
const $carousel = $(this);
const $slides = $carousel.find('.rolling a');
const slideCount = $slides.length;
let currentSlide = 0;
// Hide all slides except the first one
$slides.css('left', '100%').eq(0).css('left', '0');
// Only set up carousel if there are multiple slides
if (slideCount > 1) {
setInterval(function() {
let nextSlide = (currentSlide + 1) % slideCount;
// Move current slide out
$slides.eq(currentSlide).animate({left: '-100%'}, 500);
// Move next slide in
$slides.eq(nextSlide).css('left', '100%').animate({left: '0'}, 500);
currentSlide = nextSlide;
}, 5000); // Change slide every 5 seconds
}
});
});