Autor Tema: visor de imágenes con texto en javascript slider rotar fotografías descripción  (Leído 9168 veces)

anarubia

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 36
    • Ver Perfil
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;
}
« Última modificación: 11 de Marzo 2016, 09:55 por César Krall »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:visor de imágenes con texto en javascript
« Respuesta #1 en: 08 de Marzo 2016, 21:30 »
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

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Re:visor de imágenes con texto en javascript
« Respuesta #2 en: 09 de Marzo 2016, 00:29 »
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

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 36
    • Ver Perfil
Re:visor de imágenes con texto en javascript
« Respuesta #3 en: 09 de Marzo 2016, 10:38 »
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

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 36
    • Ver Perfil
Re:visor de imágenes con texto en javascript
« Respuesta #4 en: 09 de Marzo 2016, 10:49 »
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

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Re:visor de imágenes con texto en javascript
« Respuesta #5 en: 09 de Marzo 2016, 15:32 »
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,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:visor de imágenes con texto en javascript
« Respuesta #6 en: 09 de Marzo 2016, 20:42 »
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.
« Última modificación: 09 de Marzo 2016, 20:46 por pedro,, »

anarubia

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 36
    • Ver Perfil
Re:visor de imágenes con texto en javascript
« Respuesta #7 en: 10 de Marzo 2016, 21:31 »
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

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Re:visor de imágenes con texto en javascript
« Respuesta #8 en: 10 de Marzo 2016, 21:46 »
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

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Re:visor de imágenes con texto en javascript
« Respuesta #9 en: 10 de Marzo 2016, 21:49 »
Por cierto, el contador tiene el valor de 0.

anarubia

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 36
    • Ver Perfil
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
« Última modificación: 12 de Marzo 2016, 10:38 por anarubia »

 

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".