sábado, 8 de julio de 2023

Javascript - Banner de varias imagenes

Crea un banner de varias imagenes manejable con botones



HTML

<div id="h_img">
   
        <img src="https://www.biology.ox.ac.uk/sites/default/files/
styles/mt_image_6_4/public/biology2/images/article/wildcru_tkpp.3_
c._justin_seymour_smith.jpg?itok=YoTotr4r" alt="" id="myDIV">

    <div id="buttones">
        <div id="button_0" onclick="btnRed()" ></div>
        <div id="button_0" onclick="btnGreen()"></div>
        <div id="button_0" onclick="btnBlue()"></div>
        <div id="button_0" onclick="btnReturn()"></div>
    </div>

</div>

CSS

#h_img{
    width: 100%;
    height: auto;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}
#h_img img{
    padding: 20px 0px 0px 0px ;
}
#buttones{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0px;
}
#button_0{
    width: 15px;
    height: 15px;
    background: white;
    border-radius: 10px;
    margin: 0px 20px;
    transition: all linear .25s;
}
#button_0:hover{
    background: red;
}
#button_0:nth-child(2){
    background: white;
}
#button_0:nth-child(2):hover{
    background: green;
}
#button_0:nth-child(3){
    background: white;
}
#button_0:nth-child(3):hover{
    background: blue;
}
#button_0:nth-child(4){
    background: white;
}
#button_0:nth-child(4):hover{
    background: yellow;
}

JAVASCRIPT

/******* las imagenes de preferencia que tengan
el mismo alto y ancho *******/

/******* HAMSTER *******/
function btnRed(){
    document.getElementById("myDIV").src="
https://i.pinimg.com/736x/23/a4/35/23a43593f24169de6829dd188752e1cb.jpg";
  }
  function btnRed2(){
      location.href="https://www.lawebdelprogramador.com/
foros/JavaScript/17119-Como-hago-un-link-con-Javascript.html";
  }

/******* GATO *******/
  function btnGreen(){
    document.getElementById("myDIV").src="
https://s1.1zoom.me/prev/592/Cats_Glance_Snout_591825_600x400.jpg";
  }
/******* PERRO *******/
  function btnBlue(){
    document.getElementById("myDIV").src="
https://st.depositphotos.com/30222024/51143/i/
450/depositphotos_511431526-stock-photo-three-dogs-playing-on-a.jpg";
  }
/******* LEON2 *******/
  function btnReturn(){
    document.getElementById("myDIV").src="
https://s1.1zoom.me/prev/504/503377.jpg";
  }



No hay comentarios:

Publicar un comentario