mirror of
https://github.com/Tooloop/Tooloop-Packages.git
synced 2026-04-27 20:41:37 +02:00
83 lines
2.7 KiB
HTML
Executable File
83 lines
2.7 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Slideshow</title>
|
|
<style media="screen">
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
background: black;
|
|
}
|
|
|
|
.slide {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: absolute;
|
|
z-index: 1;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
opacity: 0;
|
|
transition: opacity 1s;
|
|
}
|
|
|
|
.active {
|
|
opacity: 1;
|
|
z-index: 2;
|
|
}
|
|
|
|
.next {
|
|
z-index: 3;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="slideshow">
|
|
<div class="slide active" style="background-image: url(/media/assets/data/image1.jpg)"></div>
|
|
<div class="slide" style="background-image: url(/media/assets/data/image2.jpg)"></div>
|
|
<div class="slide" style="background-image: url(/media/assets/data/image3.jpg)"></div>
|
|
<div class="slide" style="background-image: url(/media/assets/data/image4.jpg)"></div>
|
|
<div class="slide" style="background-image: url(/media/assets/data/image5.jpg)"></div>
|
|
<div class="slide" style="background-image: url(/media/assets/data/image6.jpg)"></div>
|
|
<div class="slide" style="background-image: url(/media/assets/data/image7.jpg)"></div>
|
|
<div class="slide" style="background-image: url(/media/assets/data/image8.jpg)"></div>
|
|
<div class="slide" style="background-image: url(/media/assets/data/image9.jpg)"></div>
|
|
<div class="slide" style="background-image: url(/media/assets/data/image10.jpg)"></div>
|
|
<div class="slide" style="background-image: url(/media/assets/data/image11.jpg)"></div>
|
|
<div class="slide" style="background-image: url(/media/assets/data/image12.jpg)"></div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
var active, next;
|
|
|
|
function nextImage() {
|
|
active = document.querySelector("#slideshow .slide.active");
|
|
active.classList.remove("active");
|
|
|
|
active = getNextSlide(active);
|
|
active.classList.add("active");
|
|
active.classList.remove("next");
|
|
|
|
next = getNextSlide(active)
|
|
next.classList.add("next")
|
|
}
|
|
|
|
function getNextSlide(slide) {
|
|
return slide.nextElementSibling ? slide.nextElementSibling : document.querySelectorAll("#slideshow .slide")[0];
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
setInterval("nextImage()", 7000);
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |