Creé un temporizador que cambia y repite entre imágenes.
Estoy buscando crear una pausa entre las imágenes en las que no se muestra nada.
Por lo tanto, logo1 encendido durante 15 segundos ocultar imágenes durante 30 segundos logo2 encendido durante 15 segundos y así sucesivamente
Esto es lo que tengo hasta ahora.
Idealmente, la piel ocultaría ambos 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>Déjame saber como va :)
<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>