51 lines
1.7 KiB
JavaScript
51 lines
1.7 KiB
JavaScript
let slideIndex = 0;
|
|
let autoScrollTimer;
|
|
const media = [
|
|
{ type: "image", src: "https://cdn.discordapp.com/attachments/1262379758478426122/1300822644509114368/image.png?ex=67223cfe&is=6720eb7e&hm=5c81ba48649c2bc0a4d249ad488d0abaa738d72949d4deb714fda4929d832aa3" },
|
|
{ type: "image", src: "https://cdn.discordapp.com/attachments/1281034862391988304/1300921012539490426/image.png?ex=6722989b&is=6721471b&hm=6fc40dd7272e62c4f2cc4cf73433d4c012d9fa939da32a72a5223f8138d4153e&&" },
|
|
{ type: "video", src: "https://files.catbox.moe/qyatl9.mp4" }
|
|
];
|
|
|
|
function showSlide(n) {
|
|
const container = document.querySelector(".slideshow-container");
|
|
container.querySelectorAll(".tool-media").forEach(el => el.remove());
|
|
|
|
slideIndex = (n + media.length) % media.length;
|
|
const currentMedia = media[slideIndex];
|
|
|
|
let element;
|
|
if (currentMedia.type === "image") {
|
|
element = document.createElement("img");
|
|
element.className = "tool-media";
|
|
element.src = currentMedia.src;
|
|
} else if (currentMedia.type === "video") {
|
|
element = document.createElement("video");
|
|
element.className = "tool-media";
|
|
element.src = currentMedia.src;
|
|
element.autoplay = true;
|
|
element.loop = true;
|
|
element.muted = true;
|
|
}
|
|
|
|
container.prepend(element);
|
|
}
|
|
|
|
function changeSlide(n) {
|
|
showSlide(slideIndex + n);
|
|
resetAutoScroll();
|
|
}
|
|
|
|
function resetAutoScroll() {
|
|
clearTimeout(autoScrollTimer);
|
|
autoScrollTimer = setTimeout(() => changeSlide(1), 11130);
|
|
}
|
|
|
|
function autoScroll() {
|
|
autoScrollTimer = setTimeout(() => {
|
|
changeSlide(1);
|
|
autoScroll();
|
|
}, 11130);
|
|
}
|
|
|
|
showSlide(slideIndex);
|
|
autoScroll();
|