Autor Tema: slide de imágenes con texto html5, css3 javascript cambiar imágenes con flechas  (Leído 4678 veces)

anarubia

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 36
    • Ver Perfil
Hola, estoy intentando hacer un slider en local con html5, css3 y javascript. Tengo un problema con el texto que acompaña a cada imagen, que el texto que corresponde a la primera imagen se repite en las otras dos. Creo que el problema esta en el código javascript, este es el código que tengo en html5, javascript, css. Gracias de antemano

Código: [Seleccionar]
<div id="slider">
<ul>
<li>
<div class="resumencomida">
<h2>NUESTRA COMIDA.</h2>
<p>En Dicamino ofrecemos platos conbinados.está diseñado en torno a los conceptos clave del café de excepcional calidad y accesibilidad para los comensales ocasionales. Durante todo el día el desayuno. cocina italiana distintivo. Y un café: resueltamente sin diluir por flaca o descafeinado, se ha convertido en un símbolo de excelencia inflexible</p>
<p>Utilice las flechas de navegación para navegar a través de una selección de nuestros platos de .</p>
</div>
<img class="fotos" src="imagenes/tomate.png" alt="comida dicamino" id="visor" name="visor">
</li>
<li>
<div class="resumencomida">
<h2>DESAYUNO.</h2>
<p>Izquierda: Marios Muesli y Ensalada de fruta fresca</p>
<p>Derecha: Huevos florentina - escalfado Rango huevos libres, que se presentan en inglés tostado molletes con salteado de espinacas y salsa bearnesa Marios</p>

</div>
    <img class="fotos" src="imagenes/espinacas.png" alt="comida dicamino">
</li>
<li>
<div class="resumencomida">
<h2>DESAYUNO.</h2>
<p>Izquierda: salmón ahumado y aguacate con su opción de multi-grano, masa fermentada o tostadas Sin Gluten</p>
<p>Derecha: caramelizado de melocotón y pistacho crepes con crema doble</p>
</div>
<img class="fotos" src="imagenes/esparragos.png" alt="comida dicamino">
</li>
</ul>

   
        <div>

    <div><img  id="anterior" src="imagenes/arrowleft.png"></div>
<div><img  id="siguiente" src="imagenes/arrowright.png"></div>

    </div>

    </div>

    <script src="js/slider.js"></script>


Código en javascript

Código: [Seleccionar]
magenes=['tomate.png', 'espinacas.png', 'esparragos.png'];

Num=0;

document.getElementById("siguiente").onclick=fotoSiguiente;
document.getElementById("anterior").onclick=fotoAnterior;

function fotoSiguiente(){
document.getElementById("visor");


if (Num==imagenes.length-1){
Num=0;
} else  {
Num++;
}
miImagen="imagenes/"+imagenes[Num];
visor.src= miImagen

}
function fotoAnterior(){
document.getElementById("visor");

if (Num==0){
Num=imagenes.length-1;
} else {
Num--;
}
miImagen="imagenes/"+imagenes[Num];
visor.src= miImagen;
}


Código css

Código: [Seleccionar]
#siguiente{
position:absolute;
     display: block;
  margin-right:30px;
   padding: 5px;
    max-width:30%;
    max-height:5%;
 
    right:0px;
    top: 43.6667%;
 
}
#anterior{
position:absolute;
     display: block;
    padding: 5px;
    max-width:30%;
    max-height:5%;
    left:0px;
    top: 43.6667%;
}

h2{
    padding-bottom:3px;
}

 .resumencomida {
    float:left;
    color:black;
    width:20%;
   min-height:25%;
    font-size:12px;
    background-color:yellow;
    position:absolute;
    padding: 18px 20px 6px;
    margin:50px 250px;
    visibility:visible;
    display:inline-block;
    overflow:hidden;


}

.fotos{
    max-width:160%;
    max-height:900px;
    margin:0 auto;
    padding:0 auto;
    top:0;
}

« Última modificación: 07 de Marzo 2016, 09:07 por César Krall »

bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Re:slide de imágenes con texto en javascript
« Respuesta #1 en: 06 de Marzo 2016, 17:14 »
Yo hice algo parecido hace unos dias, puedes echarle un vistazo aquí:
https://www.aprenderaprogramar.com/foros/index.php?topic=4089.msg17204#msg17204

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".