MediaWiki:Common.js:修订间差异
MediaWiki界面页面
更多操作
无编辑摘要 标签:已被回退 |
无编辑摘要 标签:已被回退 |
||
| 第43行: | 第43行: | ||
}); | }); | ||
/* | /* 首页智能交互轮播图 */ | ||
mw.hook('wikipage.content').add(function($content) { | mw.hook('wikipage.content').add(function($content) { | ||
$content.find('.dynamic-carousel').each(function() { | $content.find('.dynamic-carousel').each(function() { | ||
var $ | var $carousel = $(this); | ||
var $track = $carousel.find('.carousel-track'); | |||
var $slides = $track.find('.carousel-slide'); | var $slides = $track.find('.carousel-slide'); | ||
var $dotsContainer = $carousel.find('.carousel-dots'); | |||
var $prevBtn = $carousel.find('.prev-btn'); | |||
var $nextBtn = $carousel.find('.next-btn'); | |||
var count = $slides.length; | var count = $slides.length; | ||
var currentIndex = 0; | var currentIndex = 0; | ||
var timer; // 用于自动播放的计时器 | |||
// 如果图片少于等于1张,隐藏所有控件,不启动轮播 | |||
if (count <= 1) { | |||
$prevBtn.hide(); | |||
$nextBtn.hide(); | |||
$dotsContainer.hide(); | |||
return; | |||
} | |||
// --- 初始化 --- | |||
// | // 1. 动态生成底部圆点 | ||
for (var i = 0; i < count; i++) { | |||
var $dot = $('<div class="dot"></div>'); | |||
if (i === 0) $dot.addClass('active'); | |||
$dotsContainer.append($dot); | |||
} | |||
var $dots = $dotsContainer.find('.dot'); | |||
// --- 核心功能函数 --- | |||
// 切换到指定幻灯片的函数 | |||
function goToSlide(index) { | |||
// 处理边界:如果小于0就跳到最后一张,如果超过最大就跳回第一张 | |||
if (index < 0) { | |||
index = count - 1; | |||
} else if (index >= count) { | |||
index = 0; | |||
} | |||
currentIndex = index; | |||
// 移动轨道 | |||
var moveDistance = currentIndex * 100; | var moveDistance = currentIndex * 100; | ||
$track.css('transform', 'translateX(-' + moveDistance + '%)'); | $track.css('transform', 'translateX(-' + moveDistance + '%)'); | ||
}, | |||
// 更新圆点状态 | |||
$dots.removeClass('active'); | |||
$dots.eq(currentIndex).addClass('active'); | |||
} | |||
// 启动/重置自动播放计时器的函数 | |||
function startTimer() { | |||
clearInterval(timer); // 清除旧的 | |||
timer = setInterval(function() { | |||
goToSlide(currentIndex + 1); | |||
}, 5000); // 5秒切换一次 | |||
} | |||
// --- 事件监听 --- | |||
// 点击下一张 | |||
$nextBtn.on('click', function() { | |||
goToSlide(currentIndex + 1); | |||
startTimer(); // 用户手动操作后,重置计时器 | |||
}); | |||
// 点击上一张 | |||
$prevBtn.on('click', function() { | |||
goToSlide(currentIndex - 1); | |||
startTimer(); | |||
}); | |||
// 点击底部圆点 | |||
$dots.on('click', function() { | |||
var index = $(this).index(); // 获取点击的是第几个圆点 | |||
goToSlide(index); | |||
startTimer(); | |||
}); | |||
// --- 开始 --- | |||
startTimer(); // 页面加载完成后启动自动播放 | |||
}); | }); | ||
}); | }); | ||
2026年2月24日 (二) 16:08的版本
/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */
/* 萌百风格 Tabs 自动转换脚本 */
$(function() {
$('.Tabs').each(function() {
var $tabsContainer = $(this);
// 1. 检查是否已经初始化过
if ($tabsContainer.hasClass('tabs-initialized')) return;
// 2. 提取所有的标签和内容
var $tabItems = $tabsContainer.find('> .Tab');
if ($tabItems.length === 0) return;
// 3. 创建标准的标签栏和内容容器
var $labelWrapper = $('<div class="TabLabel"></div>');
var $contentWrapper = $('<div class="TabContent"></div>');
$tabItems.each(function(index) {
var $item = $(this);
var $label = $item.find('> .TabLabelText');
var $content = $item.find('> .TabContentText');
// 给第一个设为选中
if (index === 0) {
$label.addClass('selected');
$content.addClass('selected');
}
// 绑定点击事件
$label.on('click', function() {
$labelWrapper.find('.TabLabelText').removeClass('selected');
$contentWrapper.find('.TabContentText').removeClass('selected');
$(this).addClass('selected');
$content.addClass('selected');
});
$labelWrapper.append($label);
$contentWrapper.append($content);
});
// 4. 清空原有的“散装”内容,插入标准结构
$tabsContainer.empty().append($labelWrapper).append($contentWrapper).addClass('tabs-initialized');
});
});
/* 首页智能交互轮播图 */
mw.hook('wikipage.content').add(function($content) {
$content.find('.dynamic-carousel').each(function() {
var $carousel = $(this);
var $track = $carousel.find('.carousel-track');
var $slides = $track.find('.carousel-slide');
var $dotsContainer = $carousel.find('.carousel-dots');
var $prevBtn = $carousel.find('.prev-btn');
var $nextBtn = $carousel.find('.next-btn');
var count = $slides.length;
var currentIndex = 0;
var timer; // 用于自动播放的计时器
// 如果图片少于等于1张,隐藏所有控件,不启动轮播
if (count <= 1) {
$prevBtn.hide();
$nextBtn.hide();
$dotsContainer.hide();
return;
}
// --- 初始化 ---
// 1. 动态生成底部圆点
for (var i = 0; i < count; i++) {
var $dot = $('<div class="dot"></div>');
if (i === 0) $dot.addClass('active');
$dotsContainer.append($dot);
}
var $dots = $dotsContainer.find('.dot');
// --- 核心功能函数 ---
// 切换到指定幻灯片的函数
function goToSlide(index) {
// 处理边界:如果小于0就跳到最后一张,如果超过最大就跳回第一张
if (index < 0) {
index = count - 1;
} else if (index >= count) {
index = 0;
}
currentIndex = index;
// 移动轨道
var moveDistance = currentIndex * 100;
$track.css('transform', 'translateX(-' + moveDistance + '%)');
// 更新圆点状态
$dots.removeClass('active');
$dots.eq(currentIndex).addClass('active');
}
// 启动/重置自动播放计时器的函数
function startTimer() {
clearInterval(timer); // 清除旧的
timer = setInterval(function() {
goToSlide(currentIndex + 1);
}, 5000); // 5秒切换一次
}
// --- 事件监听 ---
// 点击下一张
$nextBtn.on('click', function() {
goToSlide(currentIndex + 1);
startTimer(); // 用户手动操作后,重置计时器
});
// 点击上一张
$prevBtn.on('click', function() {
goToSlide(currentIndex - 1);
startTimer();
});
// 点击底部圆点
$dots.on('click', function() {
var index = $(this).index(); // 获取点击的是第几个圆点
goToSlide(index);
startTimer();
});
// --- 开始 ---
startTimer(); // 页面加载完成后启动自动播放
});
});