Actualmente estoy aprendiendo con html y css y un poco de javascript. Soy totalmente autodidacta. Así que la mayor parte de mi código podría parecer aficionado.
De todos modos, hice una cuadrícula CSS con un diseño específico que se completó muy bien con contenido diferente. Básicamente, solo queda un div. Quiero saber si es posible colocar varias imágenes una encima de la otra. Dibujé y edité las imágenes yo mismo y solo para asegurarme, las usé en un "código desechable" diferente. No hubo problemas.
El usuario debería poder hacer clic en un botón dentro del div y las imágenes cambian. La imagen 1 es la predeterminada. El usuario presiona el botón y desaparece la imagen 1 y sigue la imagen 2 y así sucesivamente... hasta que comienza de nuevo con la Imagen 1. Algo muy similar a una galería de imágenes.
Las imágenes que he dibujado son una especie de guía explicativa de mi sitio web, que quiero usar.
No estoy seguro, si es posible, ya que mi conocimiento es muy deficiente con respecto al script Java. No estoy pidiendo la solución, pero qué método sería el primer paso para hacerlo.
Comencé con un código HTML y CSS básico (solo elegí esos valores de posición, para poder ver las imágenes una encima de la otra)
HTML
<div class="box"> <div class="img1 image-collection"> Image 1 </div> <div class="img2 image-collection"> Image 2 </div> <div class="img3 image-collection"> Image 3 </div> </div>CSS
body { margin: 100px; padding: 0; height: 100%; background-color: #111416; color: #dfdfdf; position: relative; } .image-collection { width: 1200px; height: 900px; background-size: cover; background-repeat: no-repeat; } .img1 { background-image: url(../Images/example1.jpg); position: absolute; top: 10px; left: 90px; } .img2 { background-image: url(../Images/example2.jpg); position: absolute; top: 60px; left: 180px; } .img3 { background-image: url(../Images/example3.jpg); position: absolute; top: 110px; left: 270px; }Aquí hay una solución que está buscando, siéntase libre de cambiar imágenes/clases;
let activeImage =0;// starting image let allImages = $('.single-image'); // image container class function nextphoto(){ activeImage = activeImage + 1; if(activeImage> $(allImages).length -1){ activeImage = 0; } $('.single-image').removeClass('active-image'); $(allImages).eq(activeImage).addClass('active-image'); } function previousphoto(){ activeImage = activeImage - 1; if(activeImage<0){ activeImage = $(allImages).length - 1; } $('.single-image').removeClass('active-image'); $(allImages).eq(activeImage).addClass('active-image'); } img{ max-width:100%; height:auto; max-height:100%; } .image-collection{ max-width:100px; position:relative; min-width:100px; min-height:100px; max-height:100px; overflow:hidden; } .buttons{ margin-top:1em; } .single-image{ position:absolute; left:0; top:0; opacity:0; width:100%; height:100%; transition:opacity 0.1s ease-in-out; } .active-image{ opacity:1!important; } .buttons span{ cursor:pointer; display:inline-block; background:black; color:white; margin-left:1em; margin-right:1em; padding:0.5em; font-size:0.8em; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="image-collection"> <div class="single-image active-image"> <img src="https://images.unsplash.com/photo-1526336024174-e58f5cdd8e13?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"> </div> <div class="single-image"> <img src="https://images.unsplash.com/photo-1548247416-ec66f4900b2e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=840&q=80"> </div> <div class="single-image"> <img src="https://images.unsplash.com/photo-1561948955-570b270e7c36?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=601&q=80"> </div> </div> <div class="buttons"> <span onclick="previousphoto();">Previous</span> <span onclick="nextphoto();">Next</span> </div>