Hola gente, hoy les voy a presentar como hacer las bases de un banner con botones que permitiran cambiar las imagenes del banner de forma dinamica usando transiciones suaves por medio de opacidad de la imagen. Al final podran crear algo similar a esto incluyendo el contenido que deseen.
Creando la parte HTML
Este es el codigo HTML, presta atencion a los atributos «data-name» y «data-color» los cuales van a ser iguales para asi poderlos llamar usando Javacsript.
<section>
<div class="imgblock">
<div>
<img class="igm nontransparent" src="img/color-blue.jpg" alt="" width="100%" data-color="imgblue">
<img class="igm" src="img/color-bluegreen.jpg" alt="" width="100%" data-color="imgbluegreen">
<img class="igm" src="img/color-green.jpg" alt="" width="100%" data-color="imggreen">
<img class="igm" src="img/color-purple.jpg" alt="" width="100%" data-color="imgpurple">
<img class="igm" src="img/color-red.jpg" alt="" width="100%" data-color="imgred">
</div>
<div class="df">
<span data-name="imgblue" class="spn">Blue</span>
<span data-name="imgbluegreen" class="spn">Blue Green</span>
<span data-name="imggreen" class="spn">Green</span>
<span data-name="imgpurple" class="spn">Purple</span>
<span data-name="imgred" class="spn">Red</span>
</div>
</div>
</section>Dandole estilo a nuestro HTML
Aqui esta el estilo css, lo importante en este estilo es la que declararemos para las imagenes, la cual tendra mayor importancia en la parte «transition: opacity 2s ease-in-out«. Si desean aumentar la duracion del efecto, solo deben cambiar el tiempo de la transicion, como por ejemplo: «transition: opacity 5s ease-in-out«.
<style>
.imgblock{position: relative; height: 300px; overflow: hidden;}
.imgblock .igm{opacity: 0; position: absolute; top: 0; left: 0; transition: opacity 2s ease-in-out;}
.imgblock .nontransparent{opacity: 1;}
.imgblock .df{position: absolute; bottom: 0; left: 20px;margin: 20px 0;}
span{background-color: rgba(255, 255, 255, 0.3); padding: 10px 20px; margin: 5px; cursor: pointer; border-radius: 5px;}
span:hover{background-color: blueviolet;}
</style>Interactuando con los botones en Javascript
Este sera el codigo javascript que nos permitira el funcionamiento del banner. El concepto es que cada vez que hagas click en un boton, la imagen correspondiente cambie suavemente. En este script vamos a llamar tanto a los botones como a las imagenes usando «querySelectorAll()» usando las clases que les declaramos en la parte HTML. Luego vamos a hacer un loop sobre los botones y a cada boton le vamos a agregar una accion «onclick«. La function dentro de «onclick» va hacer un loop sobre todas las imagenes y va a comparar los atributos «data-name» y «data-color«, si estos son iguales la funcion agrega la clase «nontransparent» a las imagenes para que la imagen correspondiente se muestre, de lo contrario removeremos la misma clase para que la imagen se oculte.
<script>
var igm = document.querySelectorAll('.igm'),
span = document.querySelectorAll('.spn');
span.forEach(el =>{
el.onclick = function(){
igm.forEach(ex =>{
if(el.dataset.name === ex.dataset.color){
ex.classList.add('nontransparent');
}else{
ex.classList.remove('nontransparent');
}
});
};
});
</script>Nuestro resultado final
El resultado final sera este que represento abajo. Las imagenes las he cambiado por parrafos con colores pero las funciones son todas identicas. Espero les guste.
BLUE
BLUE GREEN
GREEN
PURPLE
RED