Skip to content
Snippets Groups Projects
Commit 5486ba59 authored by Silas Meister's avatar Silas Meister
Browse files

Change slide every 30 seconds

parent 24077583
Branches
Tags
No related merge requests found
{
}
\ No newline at end of file
let slideNumber = 0;
const newsImageSources = ['img/nasa_news_1.jpg', 'img/nasa_news_2.jpg', 'img/nasa_news_3.jpg'];
const newsTitles = ['Space Station', 'Earth', 'NASA Goddard'];
const newsSubtitles = ['Expedition 48 Crew Lands Safely on Earth', 'NASA Announces Summer 2023 Hottest on Record', 'NASA\'s Webb Snaps Supersonic Outflow of Young Star'];
window.onload = onload();
function onload() {
console.log("Page loaded");
setInterval(slideImage, 30000);
}
function slideImage() {
slideNumber = (slideNumber + 1) % 3;
const slideImage = document.getElementById('slide-image');
const slideContainer = document.getElementById('slide-container');
const slideTitle = slideContainer.children[0];
const slideSubtitle = slideContainer.children[1];
let newsImageSource = newsImageSources[slideNumber];
let newsTitle = newsTitles[slideNumber];
let newsSubtitle = newsSubtitles[slideNumber];
slideImage.src = newsImageSource;
slideTitle.textContent = newsTitle;
slideSubtitle.textContent = newsSubtitle;
}
\ No newline at end of file
File moved
img/nasa_news_2.jpg

79.3 KiB

img/nasa_news_3.jpg

52.1 KiB

...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="styles.css" /> <link rel="stylesheet" type="text/css" href="styles.css" />
</head> </head>
<body> <body onload="">
<header> <header>
<img class="nasa-img" src="img/nasa.png" /> <img class="nasa-img" src="img/nasa.png" />
...@@ -50,10 +50,10 @@ ...@@ -50,10 +50,10 @@
<div class="article-content-container"> <div class="article-content-container">
<a class="article-link" href="#"></a> <a class="article-link" href="#"></a>
<img class="article-image" src="img/astronaut_landing.jpg" /> <img id="slide-image" class="article-image" src="img/nasa_news_1.jpg" />
<div class="article-content"> <div class="article-content">
<div class="news-headline"> <div id="slide-container" class="news-headline">
<h3>Space Station</h3> <h3>Space Station</h3>
<h2>Expedition 48 Crew Lands Safely on Earth</h2> <h2>Expedition 48 Crew Lands Safely on Earth</h2>
</div> </div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment