Código de JavaScript - Rotar imagenes

Imágen de perfil
Val: 1.807
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Rotar imagenesgráfica de visualizaciones


JavaScript

Actualizado el 27 de Septiembre del 2015 por Xavi (548 códigos) (Publicado el 26 de Agosto del 2012)
30.791 visualizaciones desde el 26 de Agosto del 2012
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
10.865 visualizaciones desde el 26 de Agosto del 2012

Versión 2 - con enlaces
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 27 de Septiembre del 2015gráfica de visualizaciones de la versión: Versión 2 - con enlaces
19.927 visualizaciones desde el 27 de Septiembre del 2015
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 (1)

Che
4 de Marzo del 2020
estrellaestrellaestrellaestrellaestrella
Hola me gustaría saber si me puedes ayudar con la previsualización de varias imágenes a través de File upload (unas 6 imágenes) y poder girar algunas de ellas (con javascript) para luego subirlas al servidor, gracias
Responder

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

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

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2206