<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>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;
}
: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.
<!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*{
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
<!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>
<!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>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
No hice el array porque pensaba que sería más fácil que lo entendieras así.me refería en la condicional que haces en la function siguiente, aquí está el código
Podrías haber colgado el código completo para ver como te ha quedado.
Así aprendemos todos.
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];
}
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 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énesmiImagen="imagenes/"+imagenes[Num];
visor.src= miImagen;y por último llamo a la clase resumencomida devolviendome el contenido de cada elemento (innerHTML)document.getElementsByClassName("resumencomida")[0].innerHTML=texto[Num]