Viernes 29 de abril del 2022
8:00 a.m. a 11:00 a.m.
1:00 p.m. a 2:40 p.m.
El día de hoy analizamos la siguiente
rúbrica que será utilizada para la exposición de nuestro sitio del proyecto
transversal:
De igual forma escribimos el siguiente código:
Html
<!DOCTYPE html>
<html>
<head>
<title>Galería</title>
<link
rel="stylesheet" href="estilos/css">
<link
rel="stylesheet" href="normalize/css">
</head>
<body>
<div
class="contenedor">
<div
class="atras botones">
<
</div>
<div
class="adelante botones">
>
</div>
<img
src="img/img1.jpg" alt="" id="imagen">
</div>
<script
src="js/main.js"></script>
</body>
</html>
Css
*{
margin:0;
padding:
0;
outline:
0;
box-sizing:
border-box;
}
html{
font-family:
Arial, Sans-serif;
}
img{
width:
100%;
height:
100%;
}
.contenedor{
width:
100%;
height:
780px;
position:
relative;
}
.botones{
font-size:
30px;
width:
70px;
height:
70px;
line-height:
70px;
border-radius:
50%;
background-color:
(0,0,0,.7);
text-align:
center;
font-weight:
bold;
position:
absolute;
color:
#fff;
box-shadow:
0 0 10px
rgb
255,255,255,.6;
-webkit-transition:all
.3s case;
-0-transition:all
.3s ease;
}
.botones:hover{
cursor:pointer;
transform:scale(1.2,1.2);
}
.atras{
left:2%;
top:calc(50%-70px);
}
.adelante{
right:
2%;
top:calc(90%-70px);
}
Js
var imagenes=['img/img1.jpg',
'img/img2.jpg', 'img/img3.jpg'],
cont=0;
funtion mostrar(contenedor){
contenedor.addEventListener('click'
e=>{
let
atras=contenedor.querySelector('.atras'),
adelante=contenedor.querySelector('.adelante'),
img=contenedor.querySelector('img'),
tgt=e.target;
if(tgt==atras){
if(cont>0){
img.src=imagenes[cont-1];
cont--;
}else{
img.src=imagenes[imagenes.lenght-1];
}
else
if(tgt==adelante){
if(cont<imagenes[imagenes.lenght-1])
{
img
src=imagenes[cont+1];
cont++;
}else{
img
src=imagenes[0];
cont=0;
}
}
}
});
}
document.addEventListener("DOMContentLoanded",()=>{
Let
contenedor=document.querySelector('.contenedor');
mostrar(contenedor);
});
Trabajo elaborado por: Armendariz Hernández Michelle Estefania
