visor de imágenes con texto en javascript slider rotar fotografías descripción

[anarubia]

Hola , tengo un problema en un visor que estoy haciendo en local, y es que el texto de la primera foto me salen en las demás fotos, no me sale cada foto con su texto correspondiente. ¿que tengo que modificar en el script para que cada texto salga con su imagen correspondiente, y no se repita el texto de la primera imagen en las demás?

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]

imagenes=['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;
}


[pedro,,]

Hola anarubia.

El código javaScript que has puesto, solo se encarga de cambiar el nombre la imagen que se mostrará, no tiene especificado en ningún sitio que haga nada mas.

De todas formas creo que no has copiado el código entero, por lo menos el html, y si hay css también deberías de ponerlo, porque con lo que pusiste, a mi se me muestran todas las imágenes y todos los textos.

Saludos.

[bermartinv]

Hola te adjunto código mira si te vale esto.
Por cierto, el texto lo tenias uno superpuesto sobre otro. El código CSS es más comodo para trabajar que cuaquier otro código como pueda ser usando el lenguaje java, JavaScript, etc. La ventaja es que si has cometido algo que no tiene sentido no te aparece ningún error y puedes seguir usando los estilos, pero tiene su importancia.

Código: [Seleccionar]

:12px;
        background-color:yellow;
        margin-top: 30px;
        margin-left:6%;
        padding: 18px 20px 6px;
}

    #images{
        margin:0 120px;
    }   

    .fotos{
    margin:20px 20px;
    padding:0 auto;
    border:solid thin black;
    border-radius: 50%;
}

     #flechas{
        clear:both;
        margin-top:50px;
    }
   
    #siguiente{
        display: block;
        margin:5px;
        float:right;
        cursor:pointer;
        height:50px;
        width:50px;
    }
   
    #anterior{
        margin: 5px;
        left:0px;
        float:left;
        width:50px;
        height:50px;
        cursor:pointer;
    }

   
    #pie{
        font-size: 13px;
        text-align: center;
        clear: both;
    }
   
</style>
<script>
   
window.onload=function(){
   
imagesVector= ['http://lorempixel.com/100/100/food/1/', 'http://lorempixel.com/100/100/food/2/', 'http://lorempixel.com/100/100/food/3/'];

var texto1 = '<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>';
   
var texto2 = '<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>';
   
var texto3 = '<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>';

var imagenes = document.querySelectorAll('.fotos');
   
var contador = 0;
   
imagenes[contador].style.borderWidth = 10+'px';
   
imagenes[contador].style.borderColor = 'blue';   

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

function fotoSiguiente(){
   
    contador++;
   
    if (contador>=2){

        contador = 2;
   
    }
   
    imagenes[contador-1].style.borderWidth = 'thin';
   
    imagenes[contador-1].style.borderColor = 'black';
   
    imagenes[contador].style.borderWidth = 10+'px';
   
    imagenes[contador].style.borderColor = 'blue';
   
    switch (contador){
       
        case 0: texto = texto1;
                break;
        case 1: texto = texto2;
                break;
        case 2: texto = texto3;
                break;
    }
   
    resumencomida.innerHTML = texto;
}
   

function fotoAnterior(){

    contador--;
   
    if (contador <= 0){

        contador = 0;
   
    }
   
    imagenes[contador+1].style.borderWidth = 'thin';
   
    imagenes[contador+1].style.borderColor = 'black';
   
    imagenes[contador].style.borderWidth = 10+'px';
   
    imagenes[contador].style.borderColor = 'blue';
   
    switch (contador){
       
        case 0: texto = texto1;
                break;
        case 1: texto = texto2;
                break;
        case 2: texto = texto3;
                break;
    }
   
    resumencomida.innerHTML = texto;
}   

}
</script>
</head>
<body>
    <div id="slider">
<div id="images">
                        <img class="fotos" src="http://lorempixel.com/100/100/food/1/" alt="comida dicamino" id="visor" name="visor">
        <img class="fotos" src="http://lorempixel.com/100/100/food/2/" alt="comida dicamino" id="visor" name="visor">
                <img class="fotos" src="http://lorempixel.com/100/100/food/3/" alt="comida dicamino">
                    </div>
<div id="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>

</div>

        <div id="flechas">
    <img  id="anterior" src="http://www.cruzeirofutebolclube.com.br/imgs/seta%20verde.jpg">
<img  id="siguiente" src="http://www.iconarchive.com/download/i7964/hopstarter/soft-scraps/Button-Next.ico">
        </div>
   
    <div id='pie'>
       <p>Utilice las flechas de navegación para navegar a través de una selección de nuestros platos de .</p>
    </div>
   

    </div>

   
</body>
</html>A ver si te vale.

[anarubia]

gracias bermartinv , ahora lo pruebo, yo pensaba que al mover las imágenes se me movía el texto también, mi error que no estaba entonces moviendo el texto . Gracias por decirme como se hace solo soy una aficionada. Saludos, que tengas un buen día

[anarubia]

Gracias Pedro por responderme, solo soy una aficionada, no tengo formación en programación, este es el código de la plantilla con la que practico en local en la que pongo el visor

Código: [Seleccionar]

<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>NUESTRA COMIDA</title>
<meta name="description" content="Cafeteria Restaurante Dicamino"/>
<meta name="keywords" content="HTML,CSS,XML,JavaScript"/>
<meta name="author" content="Ana Castro Lopez"/>
<meta property="og:type" content="Cafeteria.Restaurante"/>
<meta property="og:url" content="dicamino.com"/>
<meta property="site_name" content="Dicamino"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/syle.css"><script type="text/javascript" src="js/responsive-nav.min.js"></script>


</head
<body>
<?php
include "cabecera.php";
include "menu.php";
?>

<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>
</body>
</html>
y este el código que tengo en css

Código: [Seleccionar]

*{
margin:0px;
padding:0px;
border:0px;
}

body{

font: small-caps bold  1.5em helvetica;
color:red;
overflow:hidden;
}
 header{
  min-width:100%;
background:black;
min-height:40px;
position:absolute;


    }


 header nav ul li{
   
    display:inline;
   padding: 0 0 0 212px;
   

}
 
 .menu{
    margin-left:-50px;
 }

 header nav a, main nav a{
    text-decoration:none;
    color:yellow;
   

}
 main nav{
    min-width:12%;
    min-height:40px;
    position:absolute;
    float:left;
    top:45px;
    left:60px;

}


main nav ul li{
    display:block;
    padding:5px;
}
main nav .food{
   min-height:120px;
   background:black;
}
main nav .productos, nav .pesos{
    margin-top:2px;
    background:black;
    min-height:35px;
}

video{
    position:fixed;
    width:100%;
    z-index:-10;
    width:auto;
    height:auto;
    position:fixed;
    right:0;
   bottom:0;
    transform:translate(50px, 15%);
   

}
   
#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;
    overflow:hidden;
    display:inline-block;


}

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


Si te apetece, dime como sería el código en jquery para mover las imágenes y el texto, para aprender. Gracias por enseñar. saludos

[bermartinv]

Perdon no copié bien mi código :

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    #slider{
        border:thin solid black;
        position:relative;
        margin: 0 auto;
        height:500px;
        width: 700px;
    }
   
   
    #resumencomida {
        color:black;
        width:80%;
        min-height:25%;
        font-size:12px;
        background-color:yellow;
        margin-top: 30px;
        margin-left:6%;
        padding: 18px 20px 6px;
}

    #images{
        margin:0 120px;
    }   

    .fotos{
    margin:20px 20px;
    padding:0 auto;
    border:solid thin black;
    border-radius: 50%;
}

     #flechas{
        clear:both;
        margin-top:50px;
    }
   
    #siguiente{
        display: block;
        margin:5px;
        float:right;
        cursor:pointer;
        height:50px;
        width:50px;
    }
   
    #anterior{
        margin: 5px;
        left:0px;
        float:left;
        width:50px;
        height:50px;
        cursor:pointer;
    }

   
    #pie{
        font-size: 13px;
        text-align: center;
        clear: both;
    }
   
</style>
<script>
   
window.onload=function(){
   
imagesVector= ['http://lorempixel.com/100/100/food/1/', 'http://lorempixel.com/100/100/food/2/', 'http://lorempixel.com/100/100/food/3/'];

var texto1 = '<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>';
   
var texto2 = '<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>';
   
var texto3 = '<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>';

var imagenes = document.querySelectorAll('.fotos');
   
var contador = 0;
   
imagenes[contador].style.borderWidth = 10+'px';
   
imagenes[contador].style.borderColor = 'blue';   

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

function fotoSiguiente(){
   
    contador++;
   
    if (contador>=2){

        contador = 2;
   
    }
   
    imagenes[contador-1].style.borderWidth = 'thin';
   
    imagenes[contador-1].style.borderColor = 'black';
   
    imagenes[contador].style.borderWidth = 10+'px';
   
    imagenes[contador].style.borderColor = 'blue';
   
    switch (contador){
       
        case 0: texto = texto1;
                break;
        case 1: texto = texto2;
                break;
        case 2: texto = texto3;
                break;
    }
   
    resumencomida.innerHTML = texto;
}
   

function fotoAnterior(){

    contador--;
   
    if (contador <= 0){

        contador = 0;
   
    }
   
    imagenes[contador+1].style.borderWidth = 'thin';
   
    imagenes[contador+1].style.borderColor = 'black';
   
    imagenes[contador].style.borderWidth = 10+'px';
   
    imagenes[contador].style.borderColor = 'blue';
   
    switch (contador){
       
        case 0: texto = texto1;
                break;
        case 1: texto = texto2;
                break;
        case 2: texto = texto3;
                break;
    }
   
    resumencomida.innerHTML = texto;
}   

}
</script>
</head>
<body>
    <div id="slider">
<div id="images">
                        <img class="fotos" src="http://lorempixel.com/100/100/food/1/" alt="comida dicamino" id="visor" name="visor">
        <img class="fotos" src="http://lorempixel.com/100/100/food/2/" alt="comida dicamino" id="visor" name="visor">
                <img class="fotos" src="http://lorempixel.com/100/100/food/3/" alt="comida dicamino">
                    </div>
<div id="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>

</div>

        <div id="flechas">
    <img  id="anterior" src="http://www.cruzeirofutebolclube.com.br/imgs/seta%20verde.jpg">
<img  id="siguiente" src="http://www.iconarchive.com/download/i7964/hopstarter/soft-scraps/Button-Next.ico">
        </div>
   
    <div id='pie'>
       <p>Utilice las flechas de navegación para navegar a través de una selección de nuestros platos de .</p>
    </div>
   

    </div>

   
</body>
</html>

[pedro,,]

Buenas. Veo que ya te dejaron una solución, pero ya que la tengo preparada te la dejo para que veas opciones distintas de resolverlo.

Es algo muy simple, que se podría mejorar bastante, pero creo que hace lo que querías.
Por cierto, he cambiado las imágenes para hacer las pruebas, he puesto enlaces en vez de rutas locales para que lo puedas ver y luego lo adaptes de la manera que mas te guste.

Código: [Seleccionar]

<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>NUESTRA COMIDA</title>
<meta name="description" content="Cafeteria Restaurante Dicamino"/>
<meta name="keywords" content="HTML,CSS,XML,JavaScript"/>
<meta name="author" content="Ana Castro Lopez"/>
<meta property="og:type" content="Cafeteria.Restaurante"/>
<meta property="og:url" content="dicamino.com"/>
<meta property="site_name" content="Dicamino"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/syle.css"><script type="text/javascript" src="js/responsive-nav.min.js">
</head>
<body>
<?php
include "cabecera.php";
include "menu.php";
?>
<div id="slider">
<div class="resumencomida" id="texto1" style="visibility:visible;" >
<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>
<div class="resumencomida" id="texto2" style="visibility:hidden;">
<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>
<div class="resumencomida" id="texto3"style="visibility:hidden;">
<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="http://i.imgur.com/f3Pyzms.png" alt="comida dicamino" id="visor" name="visor">
<div>
<div><img  id="anterior" src="http://i.imgur.com/OVHnDaA.png" ></div>
<div><img  id="siguiente" src="http://i.imgur.com/2M1P9QB.png"></div>
</div>
</div>
<script>
imagenes=['http://i.imgur.com/f3Pyzms.png', 'http://i.imgur.com/YbX2aW1.png', 'http://i.imgur.com/IgnJyJP.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[Num];
visor.src= miImagen;
mostrarTexto(Num);
}
function fotoAnterior(){
document.getElementById("visor");

if (Num==0){
Num=imagenes.length-1;
} else {
Num--;
}
miImagen=imagenes[Num];
visor.src= miImagen;
mostrarTexto(Num);
}
function mostrarTexto(numImagen) {
if(numImagen=='0'){
document.getElementById("texto1").style.visibility = 'visible';
document.getElementById("texto2").style.visibility = 'hidden';
document.getElementById("texto3").style.visibility = 'hidden';
} else if(numImagen=='1') {
document.getElementById("texto1").style.visibility = 'hidden';
document.getElementById("texto2").style.visibility = 'visible';
document.getElementById("texto3").style.visibility = 'hidden';
} else {
document.getElementById("texto1").style.visibility = 'hidden';
document.getElementById("texto2").style.visibility = 'hidden';
document.getElementById("texto3").style.visibility = 'visible';
}
}
</script>
</body>
</html>
Saludos.

[anarubia]

Me he puesto a razonar tu código y está mal. El contador hay que inicializarlo en cero y es mejor hacer un array con el texto en vez de tantas variables , lo que hice ahora es

Código: [Seleccionar]

texto=new array();
Texto[0]="texto";
texto[1]="texto";Para después en mi caso tenía una clase "resumencomida" para los tres textos y para llamar a la clase se hace así  document.getElementsByClassName("resumencomida")[0].innerHTML=texto[Num]; yo le llame Num, en mi caso es mi contador y bueno finalmente se me mueve el texto, después de tanto razonar. Gracias por haberme contestado. Saludos

[bermartinv]

No hice el array porque pensaba que sería más fácil que lo entendieras así.
Podrías haber colgado el código completo para ver como te ha quedado.
Así aprendemos todos.

[bermartinv]

Por cierto, el contador tiene el valor de 0.

[anarubia]

No hice el array porque pensaba que sería más fácil que lo entendieras así.
Podrías haber colgado el código completo para ver como te ha quedado.
Así aprendemos todos.

me refería en la condicional que haces en la function siguiente, aquí está el código

Código: [Seleccionar]

imagenes=['tomate.png', 'espinacas.png', 'esparragos.png'];
var texto=new Array();
texto[0]="<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>"
texto[1]="<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>"
texto[2]="<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>"
document.getElementById("siguiente").onclick=fotoSiguiente;
document.getElementById("anterior").onclick=fotoAnterior;
Num=0;
function fotoSiguiente(){
document.getElementById("visor");
if (Num==imagenes.length-1 ){
Num=0;
} else  {
Num++;

}

miImagen="imagenes/"+imagenes[Num];

visor.src= miImagen;

document.getElementsByClassName("resumencomida")[0].innerHTML=texto[Num];


}

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

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

}


Código: [Seleccionar]

miImagen="imagenes/"+imagenes[Num];

visor.src= miImagen;"imagenes" es la carpeta donde tengo las imágenes para este visor, esto sobra si arriba en el array mis imágenes pongo a cada imagen la ruta de la carpeta donde están por ejemplo

Código: [Seleccionar]

imagenes=['imagenes/tomate.png', 'imagenes/espinacas.png', 'imagenes/esparragos.png'];y a continuación le paso al id del contenedor que contiene  la url de la imagénes

Código: [Seleccionar]

miImagen="imagenes/"+imagenes[Num];
visor.src= miImagen;y por último llamo a la clase resumencomida devolviendome el contenido de cada elemento (innerHTML)

Código: [Seleccionar]

document.getElementsByClassName("resumencomida")[0].innerHTML=texto[Num]   


Saludos. Hasta la próxima duda jeje