atomaka/nikhil.horse
1
0
Fork 0
Code Releases Activity

Add more images and random start

Browse source
This commit is contained in:
Jared Szechy 2021-08-31 20:40:19 -04:00
parent fc07325194
commit 80f6699c5c
6 changed files with 53 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
images/10.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 160 KiB

BIN
images/6.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
images/7.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 200 KiB

BIN
images/8.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 175 KiB

BIN
images/9.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 176 KiB

91
index.html
View file

@ -5,35 +5,35 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
position: relative;
margin: auto;
text-align: center;
}
/* Slideshow container */
.slideshow-container {
position: relative;
margin: auto;
text-align: center;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@-webkit-keyframes fade {
from {opacity: .2}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .2}
to {opacity: 1}
}
</style>
</head>
<body>
@ -55,24 +55,39 @@ img {vertical-align: middle;}
<div class="mySlides fade">
<img src="images/5.jpg">
</div>
<div class="mySlides fade">
<img src="images/6.jpg">
</div>
<div class="mySlides fade">
<img src="images/7.jpg">
</div>
<div class="mySlides fade">
<img src="images/8.jpg">
</div>
<div class="mySlides fade">
<img src="images/9.jpg">
</div>
<div class="mySlides fade">
<img src="images/10.jpg">
</div>
</div>
<script>
var slideIndex = 0;
showSlides();
var slideIndex = Math.floor(Math.random() * 10);
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 5000); // Change image every 2 seconds
}
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 3500); // Change image every 3 seconds
}
</script>
</body>