Foros del Web » Programando para Internet » Javascript »

desplazamiento slide

Estas en el tema de desplazamiento slide en el foro de Javascript en Foros del Web. Buenas, tengo un slide en el que las imágenes van pasando solas (hasta ahí bien), pero me he creado dos botones para que se pueda ...
  #1 (permalink)  
Antiguo 19/07/2014, 14:41
 
Fecha de Ingreso: julio-2014
Mensajes: 1
Antigüedad: 9 años, 9 meses
Puntos: 0
desplazamiento slide

Buenas, tengo un slide en el que las imágenes van pasando solas (hasta ahí bien), pero me he creado dos botones para que se pueda desplazar las imágenes sin necesidad de esperar o ir atrás en caso de que haya gustado alguna foto.

Aquí la verdad no tengo ni idea de cómo hacerlo y creo que mediante javascript se puede hacer. El código que he puesto es el siguiente:
Código:
<div style="left:30px; top: -235px; z-index:999; position:relative; display:block;"><a href="javascript:history.go(-1)"><img src="images/flecha_1.png" alt="Desplazamiento" border="0" /></a></div>
Tengo otro para el desplazamiento hacia delante. El tema está en que claro, la historia es la del navegador, no sobre la del objeto sobre el que quiero que haga esa función. ¿Qué tengo que poner/quitar/modificar ahí? Graciassssssss.
  #2 (permalink)  
Antiguo 20/07/2014, 07:36
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: desplazamiento slide

este es un código que ya tienes sus años (es francamente mejorable), pero el principio es el mismo
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
var imagenDefecto = "./iconos/blank.gif";
var intervalo;
var espera = 3 //Segundos de espera
var b = 0;
var noticiero = new Array();
noticiero[0] = new noticia("./iconos/img1.gif","Noticia 1","Hombre muerde a perro<br/ ><br/ >","Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.","./unapagina.asp");
noticiero[1] = new noticia("[NO PHOTO]","Noticia 2","El hambre acaba con la pobreza<br/ ><br/ >","Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages","./unapagina.asp");
noticiero[2] = new noticia("./iconos/img1.gif","Noticia 3","Asesino con instinto humanitario<br/ ><br/ >","Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type ","./unapagina.asp");
noticiero[3] = new noticia("./iconos/img1.gif","Noticia 4","El pasado se rebela y vuelve<br/ ><br/ >","Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.","./unapagina.asp");
noticiero[4] = new noticia("./iconos/img1.gif","Noticia 5","El futuro huye<br/ ><br/ >","Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently","./unapagina.asp");
noticiero[5] = new noticia("./iconos/img1.gif","Noticia 6","La acción y reacción se separan<br/ ><br/ >","Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.","./unapagina.asp");
noticiero[6] = new noticia("./iconos/img1.gif","Noticia 7","El agua abando el cauce y toma el mal camino<br/ ><br/ >","Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has","./unapagina.asp");
noticiero[7] = new noticia("./iconos/img1.gif","Noticia 8","El palomo cojo sale del armario<br/ ><br/ >","Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.","./unapagina.asp");
noticiero[8] = new noticia("./iconos/img1.gif","Noticia 9","Toro corta las dos orejas y el rabo<br/ ><br/ >","Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.","./unapagina.asp");
noticiero[9] = new noticia("./iconos/img1.gif","Noticia 10","La lluvia en Sevilla ya no es una maravilla<br/ ><br/ >","Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.","./unapagina.asp");



function noticia(imagen,titulo,titulo2,sinopsis,enlace){
this.imagen = (!(imagen.indexOf('[NO PHOTO]'))) ? imagenDefecto : imagen;
this.titulo = titulo;
this.titulo2 = titulo2;
this.sinopsis = sinopsis;
this.enlace = enlace;
}


function obj(id){
return document.getElementById(id);
}



function mostrar(n){
obj("imagen_noticia").src = noticiero[n].imagen;
obj("titulo_noticia").innerHTML = noticiero[n].titulo;
obj("titulo2_noticia").innerHTML = noticiero[n].titulo2;
obj("sinopsis_noticia").innerHTML = noticiero[n].sinopsis;
obj("enlace").href = noticiero[n].enlace
}


function cambiar(incr){
b = (noticiero.length > b+incr) ? b+incr : 0;
if(b == -1){
b = noticiero.length-1;
}
mostrar(b);
}


function inicio(){
intervalo = setInterval("cambiar(1)", espera*1000);
}

</script>
<style>
#imagen_noticia{
float:left;
padding-right: 10px;
}
</style>
</head>
<body onLoad="inicio();mostrar(0);">
<table width="665px" border="1px" cellpadding="0" cellspacing="0">
<tr height="200px">
<td width="665px" align="left" valign="top" bgcolor="#FFFFFF">
<div id="cuadro"><img src="" id="imagen_noticia" />
<h1 id="titulo_noticia"></h1>
<div id="titulo2_noticia"></div>
<a href="" id="enlace"><div id="sinopsis_noticia"></div></a>
</div>
</td>
</tr>
<tr>
<td><a href="#" onClick="clearInterval(intervalo);cambiar(-1);inicio()">Anterior</a> | <a href="#" onClick="clearInterval(intervalo)">Pausa</a> | <a href="#" onClick="clearInterval(intervalo);cambiar(1);inici o()">Siguiente</a></td>
</tr>
</table>

</body>
</html>
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Etiquetas: desplazamiento, slide
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:05.