I'm in the process of creating a vertical latest news ticker, and although I'm new to javascript, I'm eager to learn and build it myself.
So far, I've come up with this, but I want the news cycle to restart once it reaches the end.
var latestNews = "February 2021 - Latest News for Feb";
var latestNews2 = "January 2021 - Latest News for Jan";
var latestNews3 = "December 2020 - Latest News for Dec";
var latestNews4 = "November 2020 - Latest News for Nov";
var latestNews5 = "October 2020 - Latest News for Oct";
latestNewsFunction()
function latestNewsFunction() {
document.getElementById("latestNews").innerHTML = latestNews;
document.getElementById("latestNews2").innerHTML = latestNews2;
document.getElementById("latestNews3").innerHTML = latestNews3;
document.getElementById("latestNews4").innerHTML = latestNews4;
document.getElementById("latestNews5").innerHTML = latestNews5;
}
setTimeout(function(){
document.getElementById('latestNews').className += ' hidden';
}, 3000);
setTimeout(function(){
document.getElementById('latestNews2').className += ' hidden';
}, 6000);
setTimeout(function(){
document.getElementById('latestNews3').className += ' hidden';
}, 9000);
setTimeout(function(){
document.getElementById('latestNews4').className += ' hidden';
}, 12000);
setTimeout(function(){
document.getElementById('latestNews5').className += ' hidden';
}, 15000); .ln-container {
border: 1px solid black;
text-align: center;
font-size: 16px;
background-color: #eeeeee;
height: 33px;
}
.lnln {
list-style-type: none;
font-size: 12px;
margin: 0;
height: 14px;
overflow: hidden;
}
.hidden {
display: none;
}<!DOCTYPE html>
<html>
<head>
<title>Latest News Ticker</title>
</head>
<body>
<div class="ln-container"><b><u>Latest News</u></b>
<ul class="lnln">
<li id = "latestNews"></li>
<li id = "latestNews2"></li>
<li id = "latestNews3"></li>
<li id = "latestNews4"></li>
<li id = "latestNews5"></li>
</ul>
</div>
</body>If you have any ideas or suggestions, please share them. I'm still getting the hang of javascript, so my code may be basic right now, but I plan on improving with practice.