全站通知：
Widget:Bwikicgimagesplayer
刷
历
编
跳到导航
跳到搜索
<script> (window.RLQ = window.RLQ || []).push(['jquery', () => {
$(document).ready(function () {
if (window.bwikicgplayerWc == undefined) {
window.bwikicgplayerWc = 0;
}
bwikicgplayerWc = window.bwikicgplayerWc;
var element = document.querySelector(`.bwikicgimagesplayer#player`)
element.setAttribute('id', `player${window.bwikicgplayerWc}`);
createImagePlayer(`player${window.bwikicgplayerWc}`, ``, );
window.bwikicgplayerWc = window.bwikicgplayerWc + 1;
})
}]); </script> <script> function createImagePlayer(containerId, prename, totalImages) {
const container = document.getElementById(containerId);
// 创建 image-container
const imageContainer = document.createElement("div");
imageContainer.className = "image-container";
imageContainer.style.width = "100%";
imageContainer.style.height = "100%";
imageContainer.style.overflow = "hidden";
imageContainer.style.background = "#000";
imageContainer.style.position = "relative";
// 创建 current-image
const currentImage = document.createElement("img");
currentImage.className = "current-image";
currentImage.style.width = "100%";
currentImage.style.height = "100%";
currentImage.style.objectFit = "cover";
currentImage.style.position = "absolute";
currentImage.style.top = "0";
currentImage.style.left = "0";
// 创建 timer 元素
const timer = document.createElement("div");
timer.className = "timer";
timer.style.position = "absolute";
timer.style.top = "10px";
timer.style.left = "10px";
timer.style.color = "white";
timer.style.fontSize = "1.2em";
timer.style.zIndex = "10";
timer.style.display = "none";
timer.textContent = "0秒";
// 创建 bwiki-cgan-bottom
const bottomBar = document.createElement("div");
bottomBar.className = "bwiki-cgan-bottom";
bottomBar.style.width = "100%";
bottomBar.style.height = "67px";
bottomBar.style.background = "linear-gradient(180deg, transparent 2.18%, #000)";
bottomBar.style.position = "absolute";
bottomBar.style.bottom = "0";
bottomBar.style.left = "0";
bottomBar.style.display = "flex";
bottomBar.style.alignItems = "center";
bottomBar.style.justifyContent = "space-between";
bottomBar.style.padding = "0 10px";
bottomBar.style.boxSizing = "border-box";
// 创建播放按钮
const playButton = document.createElement("div");
playButton.className = "play-button button";
playButton.innerHTML = `
<svg class="play-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" width="28" height="28">
<g clip-path="url(#__lottie_element_49)"><g transform="matrix(0.21059095859527588,0,0,0.21059095859527588,20.56992530822754,14.098675727844238)" opacity="0.0005671460094085035" style="display: none;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-5.484000205993652,-10 C-7.953000068664551,-10 -8,-7.984000205993652 -8,-7.984000205993652 C-8,-7.984000205993652 -8.008000373840332,7.984000205993652 -8.008000373840332,7.984000205993652 C-8.008000373840332,7.984000205993652 -7.984000205993652,9.991999626159668 -5.5,9.991999626159668 C-3.0160000324249268,9.991999626159668 -3.003999948501587,7.995999813079834 -3.003999948501587,7.995999813079834 C-3.003999948501587,7.995999813079834 -2.9839999675750732,-8 -2.9839999675750732,-8 C-2.9839999675750732,-8 -3.015000104904175,-10 -5.484000205993652,-10z"></path><path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M-5.484000205993652,-10 C-7.953000068664551,-10 -8,-7.984000205993652 -8,-7.984000205993652 C-8,-7.984000205993652 -8.008000373840332,7.984000205993652 -8.008000373840332,7.984000205993652 C-8.008000373840332,7.984000205993652 -7.984000205993652,9.991999626159668 -5.5,9.991999626159668 C-3.0160000324249268,9.991999626159668 -3.003999948501587,7.995999813079834 -3.003999948501587,7.995999813079834 C-3.003999948501587,7.995999813079834 -2.9839999675750732,-8 -2.9839999675750732,-8 C-2.9839999675750732,-8 -3.015000104904175,-10 -5.484000205993652,-10z"></path></g></g><g transform="matrix(0.6861466765403748,0,0,0.6861466765403748,22.595138549804688,14)" opacity="0.03346067141403964" style="display: none;"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-5.484000205993652,-10 C-7.953000068664551,-10 -8,-7.984000205993652 -8,-7.984000205993652 C-8,-7.984000205993652 -8.008000373840332,7.984000205993652 -8.008000373840332,7.984000205993652 C-8.008000373840332,7.984000205993652 -7.984000205993652,9.991999626159668 -5.5,9.991999626159668 C-3.0160000324249268,9.991999626159668 -3.003999948501587,7.995999813079834 -3.003999948501587,7.995999813079834 C-3.003999948501587,7.995999813079834 -2.9839999675750732,-8 -2.9839999675750732,-8 C-2.9839999675750732,-8 -3.015000104904175,-10 -5.484000205993652,-10z"></path><path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M-5.484000205993652,-10 C-7.953000068664551,-10 -8,-7.984000205993652 -8,-7.984000205993652 C-8,-7.984000205993652 -8.008000373840332,7.984000205993652 -8.008000373840332,7.984000205993652 C-8.008000373840332,7.984000205993652 -7.984000205993652,9.991999626159668 -5.5,9.991999626159668 C-3.0160000324249268,9.991999626159668 -3.003999948501587,7.995999813079834 -3.003999948501587,7.995999813079834 C-3.003999948501587,7.995999813079834 -2.9839999675750732,-8 -2.9839999675750732,-8 C-2.9839999675750732,-8 -3.015000104904175,-10 -5.484000205993652,-10z"></path></g></g><g style="display: block;" transform="matrix(1,0,0,1,14,14)" opacity="0.9999905913946383"><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d="M0 0"></path><path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d="M0 0"></path></g><g opacity="1" transform="matrix(1,0,0,1,0,0)"><path fill="rgb(255,255,255)" fill-opacity="1" d=" M-7.031000137329102,-10.875 C-7.031000137329102,-10.875 -8.32800006866455,-11.25 -9.42199993133545,-10.468999862670898 C-10.109999656677246,-9.906999588012695 -10,-7.992000102996826 -10,-7.992000102996826 C-10,-7.992000102996826 -10,8.015999794006348 -10,8.015999794006348 C-10,8.015999794006348 -10.125,10.241999626159668 -9,10.991999626159668 C-7.875,11.741999626159668 -5,10.031000137329102 -5,10.031000137329102 C-5,10.031000137329102 7.968999862670898,1.875 7.968999862670898,1.875 C7.968999862670898,1.875 9,1.062000036239624 9,0 C9,-1.062000036239624 7.968999862670898,-1.937999963760376 7.968999862670898,-1.937999963760376 C7.968999862670898,-1.937999963760376 -7.031000137329102,-10.875 -7.031000137329102,-10.875z"></path><path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(255,255,255)" stroke-opacity="1" stroke-width="0" d=" M-7.031000137329102,-10.875 C-7.031000137329102,-10.875 -8.32800006866455,-11.25 -9.42199993133545,-10.468999862670898 C-10.109999656677246,-9.906999588012695 -10,-7.992000102996826 -10,-7.992000102996826 C-10,-7.992000102996826 -10,8.015999794006348 -10,8.015999794006348 C-10,8.015999794006348 -10.125,10.241999626159668 -9,10.991999626159668 C-7.875,11.741999626159668 -5,10.031000137329102 -5,10.031000137329102 C-5,10.031000137329102 7.968999862670898,1.875 7.968999862670898,1.875 C7.968999862670898,1.875 9,1.062000036239624 9,0 C9,-1.062000036239624 7.968999862670898,-1.937999963760376 7.968999862670898,-1.937999963760376 C7.968999862670898,-1.937999963760376 -7.031000137329102,-10.875 -7.031000137329102,-10.875z"></path></g></g></g>
</svg>
<svg class="pause-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" width="28" height="28" style="display: none;">
<rect x="8" y="6" width="4" height="16" fill="white"></rect>
<rect x="16" y="6" width="4" height="16" fill="white"></rect>
</svg>
`;
// 创建进度条容器
const progressBarContainer = document.createElement("div");
progressBarContainer.className = "progress-bar-container";
progressBarContainer.style.width = "100%";
progressBarContainer.style.height = "7px";
progressBarContainer.style.backgroundColor = "#ddd";
progressBarContainer.style.marginTop = "5px";
progressBarContainer.style.overflow = "hidden";
progressBarContainer.style.position = "relative";
progressBarContainer.style.cursor = "pointer";
// 创建进度条
const progressBar = document.createElement("div");
progressBar.className = "progress-bar";
progressBar.style.height = "100%";
progressBar.style.width = "0%";
progressBar.style.transition = "width 0.1s linear";
progressBar.style.position = "absolute";
progressBar.style.top = "0";
progressBar.style.left = "0";
progressBar.style.backgroundColor = "#4caf50";
progressBar.style.zIndex = "2";
// 创建预加载进度条
const preloadProgressBar = document.createElement("div");
preloadProgressBar.className = "preload-progress-bar";
preloadProgressBar.style.height = "100%";
preloadProgressBar.style.width = "0%";
preloadProgressBar.style.position = "absolute";
preloadProgressBar.style.top = "0";
preloadProgressBar.style.left = "0";
preloadProgressBar.style.backgroundColor = "#ff9500";
preloadProgressBar.style.zIndex = "1";
progressBarContainer.appendChild(progressBar); progressBarContainer.appendChild(preloadProgressBar);
// 创建全屏按钮
const fullscreenButton = document.createElement("div");
fullscreenButton.className = "fullscreen-button button";
fullscreenButton.innerHTML = `
<svg class="fullscreen-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" width="28" height="28">
<path fill="#fff" d="M6 4a2 2 0 0 0-2 2v6.5a1 1 0 0 0 2 0V6h6.5a1 1 0 1 0 0-2H6Zm14 7.5a1 1 0 1 0-2 0V18h-6.5a1 1 0 1 0 0 2H18a2 2 0 0 0 2-2v-6.5Z"></path>
</svg>
<svg class="exit-fullscreen-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" width="28" height="28" style="display: none;">
<path fill="#fff" d="M11.5 3a1 1 0 1 0-2 0v6.5H3a1 1 0 0 0 0 2h6.5a2 2 0 0 0 2-2V3Zm3 9.5a2 2 0 0 0-2 2V21a1 1 0 0 0 2 0v-6.5H21a1 1 0 0 0 0-2h-6.5Z"></path>
</svg>
`;
// 将按钮和进度条添加到 bottomBar bottomBar.appendChild(playButton); bottomBar.appendChild(progressBarContainer); bottomBar.appendChild(fullscreenButton);
// 将 current-image、timer 和 bwiki-cgan-bottom 添加到 image-container imageContainer.appendChild(currentImage); imageContainer.appendChild(timer); imageContainer.appendChild(bottomBar);
// 将 image-container 添加到主容器 container.appendChild(imageContainer);
// 初始化播放器逻辑
let currentImageIndex = 1;
let intervalId = null;
let timerId = null;
let elapsedTime = 0;
let isDragging = false;
let data2 = {};
let loadedImagesCount = 0;
function disableComponents() {
playButton.classList.add("disabled");
progressBarContainer.classList.add("disabled");
fullscreenButton.classList.add("disabled");
}
function enableComponents() {
playButton.classList.remove("disabled");
progressBarContainer.classList.remove("disabled");
fullscreenButton.classList.remove("disabled");
}
function updatePreloadProgressBar() {
const preloadProgressPercentage = (loadedImagesCount / totalImages) * 100;
preloadProgressBar.style.width = `${preloadProgressPercentage}%`;
}
function preloadImages() {
return new Promise((resolve, reject) => {
let loadedCount = 0;
function loadNextImage(index) {
if (index > totalImages) {
resolve();
return;
}
const img = new Image();
img.src = `${data2[index]}`;
img.onload = () => {
loadedCount++;
loadedImagesCount = loadedCount;
updatePreloadProgressBar();
loadNextImage(index + 1);
};
img.onerror = () => {
console.error(`图片加载失败: ${data2[index]}`);
reject();
};
}
loadNextImage(1);
});
}
function showNextImage() {
const imagePath = `${data2[currentImageIndex]}`;
currentImage.src = imagePath;
const progressPercentage = (currentImageIndex / totalImages) * 100;
progressBar.style.width = `${progressPercentage}%`;
if (currentImageIndex === totalImages) {
clearInterval(intervalId);
clearInterval(timerId);
currentImageIndex = 1;
intervalId = null;
timerId = null;
playButton.querySelector(".pause-icon").style.display = "none";
playButton.querySelector(".play-icon").style.display = "block";
} else {
currentImageIndex += 1;
}
}
function updateTimer() {
elapsedTime += 0.0417;
timer.textContent = `${elapsedTime.toFixed(2)}秒`;
}
playButton.addEventListener("click", () => {
if (intervalId === null) {
if (currentImageIndex > totalImages) {
currentImageIndex = 1;
elapsedTime = 0;
progressBar.style.width = "0%";
}
intervalId = setInterval(showNextImage, 41.7);
timerId = setInterval(updateTimer, 41.7);
playButton.querySelector(".play-icon").style.display = "none";
playButton.querySelector(".pause-icon").style.display = "block";
} else {
clearInterval(intervalId);
clearInterval(timerId);
intervalId = null;
timerId = null;
playButton.querySelector(".pause-icon").style.display = "none";
playButton.querySelector(".play-icon").style.display = "block";
}
});
progressBarContainer.addEventListener("mousedown", (e) => {
isDragging = true;
updateProgressBar(e);
});
document.addEventListener("mousemove", (e) => {
if (isDragging) {
updateProgressBar(e);
}
});
document.addEventListener("mouseup", () => {
isDragging = false;
});
function updateProgressBar(e) {
const containerWidth = progressBarContainer.offsetWidth;
const offsetX = e.pageX - progressBarContainer.getBoundingClientRect().left;
const progressPercentage = (offsetX / containerWidth) * 100;
const newImageIndex = Math.round((progressPercentage / 100) * totalImages);
if (newImageIndex >= 1 && newImageIndex <= totalImages) {
currentImageIndex = newImageIndex;
progressBar.style.width = `${progressPercentage}%`;
currentImage.src = `${data2[currentImageIndex]}`;
}
}
fullscreenButton.addEventListener("click", () => {
if (!document.fullscreenElement) {
imageContainer.requestFullscreen().catch(err => {
console.error(`无法进入全屏模式: ${err.message}`);
});
fullscreenButton.querySelector(".fullscreen-icon").style.display = "none";
fullscreenButton.querySelector(".exit-fullscreen-icon").style.display = "block";
} else {
document.exitFullscreen().catch(err => {
console.error(`无法退出全屏模式: ${err.message}`);
});
fullscreenButton.querySelector(".exit-fullscreen-icon").style.display = "none";
fullscreenButton.querySelector(".fullscreen-icon").style.display = "block";
}
});
async function initialize() {
disableComponents();
let parsetext = "";
for (let i = 1; i <= totalImages; i++) {
parsetext += `|${i}=`;
}
parsetext += "结束";
try {
const response = await fetch(`https://wiki.biligame.com/${mw.config.values.wgGameName}/api.php?action=parse&format=json&text=${encodeURIComponent(parsetext)}&utf8=1`);
const res = await response.json();
const yuchuli = res.parse.text['*'];
function removeFromEnd(str, endSubstring) {
const endIndex = str.indexOf(endSubstring);
if (endIndex !== -1) {
return str.substring(0, endIndex);
} else {
return str;
}
}
const originalString = yuchuli;
const resultString = removeFromEnd(originalString, "结束");
const parser = new DOMParser();
const doc = parser.parseFromString(resultString, 'text/html');
const divElement = doc.querySelector('div.mw-parser-output');
const pElement = divElement.querySelector('p').textContent;
const cgycl = `{{你好${pElement} }}`;
data2 = parseWikiData(cgycl);
await preloadImages();
console.log("所有图片加载完成，开始播放");
enableComponents();
showNextImage();
} catch (error) {
console.error("初始化失败:", error);
}
}
function parseWikiData(data) {
data = data.trim().slice(2, -2);
const lines = data.split('|').filter(Boolean);
const obj = {};
lines.forEach(line => {
const parts = line.split('=');
if (parts.length < 2) {
console.warn(`Invalid line: ${line}, skipping.`);
return;
}
const trimmedKey = (parts[0] || ).trim();
const trimmedValue = (parts[1] || ).trim();
if (!trimmedKey) {
console.warn(`Skipping empty key: ${line}`);
return;
}
obj[trimmedKey] = trimmedValue;
});
return obj; }
initialize();
} </script>
沪公网安备 31011002002714 号