Foros aprenderaprogramar.com

Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: anarubia en 06 de Marzo 2016, 16:54

Título: slide de imágenes con texto html5, css3 javascript cambiar imágenes con flechas
Publicado por: anarubia en 06 de Marzo 2016, 16:54

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;
}



Título: Re:slide de imágenes con texto en javascript
Publicado por: bermartinv 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 (https://www.aprenderaprogramar.com/foros/index.php?topic=4089.msg17204#msg17204)