I've created a timer that switches and loops between images.
I'm looking to create a pause in between the images in which nothing is shown.
So logo1 on for 15 seconds hide images for 30 seconds logo2 on for 15 seconds and so on
This is what I've got so far.
Ideally, the hide would hide both DIVS
<html>
<head>
<style>
.box1 {
background-color: rgba(0,0,0,0);
color: #fff;
opacity: 1;
align-content: safe;
}
.brandlogo {
background-color: rgba(0,0,0,0);
position: absolute;
top: 500;
left: 1100;
}
.box2 {
background-color: rgba(0,0,0,0);
color: #545454;
position: absolute;
top: 400;
left: 1000;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box box1" id="art">
<img class="brandlogo" id="image" src="logo1.png" width="100">
</div>
<div class="box box2" id="frameart">
<img class="brandframe" id="frame" src="adframe2.png" width="300">.
</div>
</div>
<script type="text/javascript">
var image = document.getElementById("image");
var currentPos = 0;
var images = ["logo1.png", "logo2.png", "logo3.png"]
function timercount() {
if (++currentPos >= images.length)
currentPos = 0;
image.src = images[currentPos];
}
setInterval(timercount, 3000);
$("#art").show();
setTimeout(function() {
$("#art").hide();
}, 500);
</script>
</body>
</html>
Let me know how it goes :)
<script type = "text/javascript">
var image = document.getElementById("image");
var currentPos = 0;
var images = ["logo1.png", "logo2.png", "logo3.png"]
// jquery api on hide
// https://api.jquery.com/hide/
function hideArt() {
$("#art").hide(30000, changeLogo);
}
function changeLogo() {
if (++currentPos >= images.length) {
currentPos = 0;
}
image.src = images[currentPos];
// restart loop
loop();
}
function loop() {
// setTimeout api
// https://developer.mozilla.org/en-US/docs/Web/API/setTimeout
setTimeout(hideArt, 15000);
}
// start loop
loop();
</script>