kayomn
/
kayomn.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make slideshow halt during mouse hover

This commit is contained in:
kayomn 2024-06-24 09:48:45 +01:00
parent a3edf5449b
commit 9e1678b810
1 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
templates/index.html
View File

@ -15,13 +15,13 @@
<a href="https://www.youtube.com/watch?v=zm8Sx6cVbmM">
<div class="title">Afterglow</div>
<img src="/showreel/afterglow.png" />
<div class="summary">Work-in-progress immersive sim experiment built using a the Ona game engine.</div>
<div class="summary">Work-in-progress immersive sim experiment built using the Ona game engine.</div>
</a>
<a href="https://www.youtube.com/watch?v=ijJhM8nfthw">
<div class="title">Afterglow</div>
<img src="/showreel/afterglow-menu.png" />
<div class="summary">Work-in-progress immersive sim experiment built using a the Ona game engine.</div>
<div class="summary">Work-in-progress immersive sim experiment built using the Ona game engine.</div>
</a>
<a href="https://sauce.pizzawednes.day/protectorate/game">
@ -121,34 +121,44 @@
</style>
<script type="module">
const slideshowIntervalSeconds = 7.5;
const slideshowIntervalSeconds = 5;
window.addEventListener("load", async () => {
let slideshows = document.getElementsByClassName("slideshow")
let slideshows = document.getElementsByClassName("slideshow");
for (let slideshow of slideshows) {
if (!slideshow.hasChildNodes()) {
continue;
}
let slideIndex = 0
let slideIndex = 0;
let intervalId;
setInterval(() => {
let children = slideshow.children
const startSlideshow = () => {
intervalId = setInterval(() => {
let children = slideshow.children;
slideIndex = (slideIndex + 1) % children.length;
slideIndex = (slideIndex + 1) % children.length
for (let index = 0; index < children.length; index += 1) {
children[index].style.display = (index === slideIndex) ? "block" : "none";
}
}, slideshowIntervalSeconds * 1000);
};
for (let index = 0; index < children.length; index += 1)
children[index].style.display = (index == slideIndex) ? "block" : "none"
}, slideshowIntervalSeconds * 1000)
slideshow.addEventListener("mouseenter", () => {
clearInterval(intervalId);
});
let children = slideshow.children
slideshow.addEventListener("mouseleave", startSlideshow);
children[0].style.display = "block"
let children = slideshow.children;
children[0].style.display = "block";
for (let index = 1; index < children.length; index += 1) {
children[index].style.display = "none"
children[index].style.display = "none";
}
startSlideshow();
}
});
</script>