Código de JavaScript - Rotar imagenes

Imágen de perfil

Rotar imagenesgráfica de visualizaciones


JavaScript

Actualizado el 27 de Septiembre del 2015 por Xavi (Creado el 26 de Agosto del 2012)
14.308 visualizaciones desde el 26 de Agosto del 2012. Una media de 70 por semana
Script que muestra como crear un objeto de JavaScript y utilizarlo para rotar diferentes grupos de imágenes. Permite especificar un grupo diferente de imágenes para cada rotación y diferentes tiempos entre cada rotación.
Al poner el ratón encima de una de las imágenes, la rotación se para, para que al sacar el ratón, la secuencia continué.

Versión 1

Publicado el 26 de Agosto del 2012gráfica de visualizaciones de la versión: Versión 1
9.710 visualizaciones desde el 26 de Agosto del 2012. Una media de 49 por semana

Versión 2 - con enlaces

Actualizado el 28 de Septiembre del 2015 (Creado el 27 de Septiembre del 2015)gráfica de visualizaciones de la versión: Versión 2 - con enlaces
4.599 visualizaciones desde el 27 de Septiembre del 2015. Una media de 77 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

En esta nueva versión, se muestra como rotar las imágenes igual que la versión 1, pero se han añadido enlaces a cada una de las imágenes, para que se pueda pulsar en cada una de las imágenes y vayan a una página web diferente.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<html>
<head>
<meta charset="utf-8">
 
<script>
function rotarImagenes(idDestino, imagenInicial){
	// Contiene el identificador del Timeout()
	this.SecuenciaID=null;
	// Determina la imagen inicial. La primera imagen es la 0
	this.imagen=imagenInicial;
	// Determina el tiempo en milisegundos del refresco
	this.duracion=3000;
	// Array que contiene los objetos Image() con todas las imagenes
	this.imagenes="";
	// Contendra el listado de imagenes a mostrar
	this.listadoImagenes="";
	// Contiene el listado de enlaces. Tiene que haber el mismo numero de
	// enlaces que de imagenes
	this.listadoEnlaces="";
	// Contiene el id del img donde mostrar las imagenes
	this.showId=idDestino;
 
	/**
	 * Funcion que genera tantas imagenes como se desee.
	 * Estas imagenes, seran las que se utilizaran para mostrar en la web
	 */
	this.CreaArray=function(n) {
		this.length = n
		for (var i = 0; i<n; i++) {
			this[i] = new Image()
		}
		return this
	};
 
	/**
	 * Funcion para detener y reiniciar la secuencia de imagenes
	 * En este ejemplo, se puede iniciar o parar la secuancia poniendo el raton
	 * encima de la imagen. Para ello, se ha utilizado el evento onmouseover()
	 * y onmouseout() en el <img>
	 */
	this.Secuencia=function(type) {
		if(type=="stop")
		{
			clearTimeout(this.SecuenciaID);
		}else if(type=="start"){
			this.MostrarSecuencia();
		}
	};
 
	/**
	 * Funcion que va mostrando la secuencia de imagenes
	 */
	this.MostrarSecuencia=function() {
		// modificamos el enlace
		document.getElementById(this.showId).href=this.listadoEnlaces[this.imagen];
		// modificamos la imagen
		document.getElementById(this.showId).getElementsByTagName("img")[0].src = this.imagenes[this.imagen].src;
 
		this.imagen++;
		if(this.imagen>=this.listadoImagenes.length)
		this.imagen=0
 
		var instant = this;
		this.SecuenciaID=setTimeout(function() { instant.MostrarSecuencia();}, this.duracion);
	};
 
	/**
	 * Funcion inicial donde se inicializan las imagenes y enlaces
	 * Tiene que recibir un array con el listado de imagenes y enlaces
	 * La cantidad de enlaces y imagenes tiene que ser la misma
	 */
	this.IniciarSecuencia=function(listadoImagenes,listadoEnlaces) {
		this.listadoImagenes=listadoImagenes;
		this.listadoEnlaces=listadoEnlaces
 
		this.imagenes=new this.CreaArray(listadoImagenes.length);
		for (var i = 0; i<listadoImagenes.length; i++) {
			this.imagenes[i].src = listadoImagenes[i];
		}
		this.MostrarSecuencia();
	};
};
 
/**
 * Definimos tantas variables como secuencias diferentes de imagenes deseemos
 * Cada secuencia funcionara por si sola.
 * Pasamos como parametro:
 *      - el identificador (id) del <a href...> que contendra las imagenes
 *      - el identificador de la imagen inicial que deseamos que se visualice.
 *          La primera imagen es el valor 0
 */
var img1=new rotarImagenes("secuencia1",0);
 
/**
 * Definimos un array de imagenes para cada una de las secuencias
 */
var listadoImagenes1=[
	"/carpeta/image1.jpg",
	"/carpeta/image2.jpg",
	"/carpeta/image3.jpg",
	"/carpeta/image4.jpg"
];
 
/**
 * Definimos un array de urls para cada una de las secuencias
 */
var listadoEnlaces1=[
	'http://www.lawebdelprogramador.com/',
	'http://www.lawebdelprogramador.com/cursos/',
	'http://www.lawebdelprogramador.com/codigo/',
	'http://www.lawebdelprogramador.com/foros/'
];
 
/**
 * Funcion que se ejecuta una vez cargada la pagina (en el onload del <body>)
 */
window.onload=function()
{
	/**
	 * Inicializamos las secuencias de imagenes, pasando como parametro el
	 * listado de imagenes a rotar
	 */
	img1.IniciarSecuencia(listadoImagenes1,listadoEnlaces1);
}
</script>
</head>
 
<body>
 
<a href="" id="secuencia1"><img src="" alt="Secuencia" id=""></a>
 
</body>
</html>



Comentarios sobre la versión: Versión 2 - con enlaces (0)


No hay comentarios
 

Comentar la versión: Versión 2 - con enlaces

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2206