JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<div id="iframeContainer">
		<div style="color:orange">Warn:No se ha introducido ninguna URL ni tiempo de refresco</div>
		<h3>Instrucciones de uso:</h3>
		<ul>
		<li>añadir a la url base los siguientes parametros:</li>
		<li>tiempo: (segundos) Indica el tiempo entre cada página</li>
		<li>urln:(url1,url2,...) direccion URL de las páginas a mostrar</li>
		<li>Ejemplo: <span style="color:turquoise">iframeCarrusel.html?tiempo=10&url1=https://demanda.ree.es/visiona/canarias/canarias/total&url2=https://demanda.ree.es/visiona/canarias/tenerife/total </span>
		</li>
		<li>
		iframesCarrusel.html?tiempo=10&url1=https://demanda.ree.es/visiona/canarias/el_hierro/total&url2=https://demanda.ree.es/visiona/canarias/tenerife/total&url3=https://demanda.ree.es/visiona/canarias/la_gomera/total
		</li>
		</ul>
	</div>
  <script>crearCarrusel();</script>

CSS

html, body{
	  overflow:hidden;
	  padding:0px;
	  margin:0px;
	  background-color:#20262e;
	  color:#ddd;
	}
	body div{overflow:hidden;}
	.solid{opacity:1.0; left:0px;z-index:2}
	.exiting{opacity:0.0;top:40px;left:0px}
	iframe{ position:absolute; top:0px;left:40px;width:100%; height:100%; opacity:0.0; transition: all 2s;}

JavaScript

function crearCarrusel(){
		var url= new URL(window.location.href);
		var tiempo = url.searchParams.get("tiempo");
		var urls= url.searchParams.getAll("url");
    urls.push("https://demanda.ree.es/visiona/canarias/el_hierro/tota");
 urls.push("https://demanda.ree.es/visiona/canarias/tenerife/total");
 urls.push("https://demanda.ree.es/visiona/canarias/la_gomera/total");
    
		var tiempo = url.searchParams.get("tiempo") || 10;
		if(tiempo && urls.length>0){
    console.log("starting");
			//Limpiamos iframeContainer
			var iframeContainer=document.getElementById("iframeContainer");
			iframeContainer.innerHTML="";
			
			//Creamos los iframes
			for(var i=0;i<urls.length;i++){
				var iframe = document.createElement('iframe');
				iframe.setAttribute("frameBorder","0");
				iframe.src=urls[i];
				iframeContainer.appendChild(iframe);
			}
			//Animation
			animate(0,tiempo);
		}else{
			alert("SIN LOS PARAMETROS NECESARIOS");
		}
	}
	
	function animate(pos,tiempo){
		console.log(animate);
		var iframeContainer=document.getElementById("iframeContainer");
		pos=pos%iframeContainer.childNodes.length;
		for(var i=0;i<iframeContainer.childNodes.length;i++){
			if(i==pos){
				iframeContainer.childNodes[i].classList.add("solid");
			}else if(iframeContainer.childNodes[i].classList.contains("solid")){
				iframeContainer.childNodes[i].classList.remove("solid");
				iframeContainer.childNodes[i].classList.add("exiting");
			}else{
				iframeContainer.childNodes[i].classList.remove("exiting");
				iframeContainer.childNodes[i].classList.remove("solid");
			}
		}
		setTimeout(function() {animate(pos+1,tiempo)}, tiempo*1000);
	}