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。
// Wait for document ready
mw.hook('wikipage.content').add(function() {
// Initialize carousels
initializeCarousels();
});
function initializeCarousels() {
// Find all carousel containers
const carousels = document.querySelectorAll('.modern-carousel');
carousels.forEach(function(carousel) {
const track = carousel.querySelector('.carousel-track');
const items = carousel.querySelectorAll('.carousel-item');
const prevButton = carousel.querySelector('.carousel-button.prev');
const nextButton = carousel.querySelector('.carousel-button.next');
let currentIndex = 0;
// Set initial width for track
track.style.width = `${items.length * 100}%`;
// Function to move to specific slide
function moveToSlide(index) {
// Ensure index is within bounds
if (index < 0) index = items.length - 1;
if (index >= items.length) index = 0;
currentIndex = index;
// Move track
track.style.transform = `translateX(-${currentIndex * (100 / items.length)}%)`;
// Update active class
items.forEach(item => item.classList.remove('active'));
items[currentIndex].classList.add('active');
}
// Add hover effect
items.forEach(function(item, index) {
item.addEventListener('mouseenter', function() {
moveToSlide(index);
});
});
// Add navigation
prevButton.addEventListener('click', function() {
moveToSlide(currentIndex - 1);
});
nextButton.addEventListener('click', function() {
moveToSlide(currentIndex + 1);
});
// Initialize first slide as active
moveToSlide(0);
// Auto-rotate (optional)
let autoRotate = setInterval(function() {
moveToSlide(currentIndex + 1);
}, 5000);
// Pause auto-rotate on hover
carousel.addEventListener('mouseenter', function() {
clearInterval(autoRotate);
});
// Resume auto-rotate on mouseleave
carousel.addEventListener('mouseleave', function() {
autoRotate = setInterval(function() {
moveToSlide(currentIndex + 1);
}, 5000);
});
});
}
Loading comments...