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