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

57
index.html
View file

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