JavaScript - secuencia de imagenes

   
Vista:

secuencia de imagenes

Publicado por carlos (11 intervenciones) el 08/08/2012 17:16:47
Hola a todos, tengo un problema con una web que estoy haciendo, a ver si me podeis ayudar. Quiero poner en dos div de la misma página una secuencia de imagenes. He conseguido con este scrip que me funcione en uno de los div:


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
<script language="javascript">
 
var SecuenciaEjecutandose = false
var SecuenciaID = null
var imagen = 6
var duracion = 3100
 
if ( CompruebaVersion() ) {
imagenes = new CreaArray( 6 )
imagenes[1].src = "/imagenes/empresa/ empresas del metal/1.jpg"
imagenes[2].src = "/imagenes/empresa/ empresas del metal/2.jpg"
imagenes[3].src = "/imagenes/empresa/ empresas del metal/3.jpg"
imagenes[4].src = "/imagenes/empresa/ empresas del metal/4.jpg"
imagenes[5].src = "/imagenes/empresa/ empresas del metal/5.jpg"
imagenes[6].src = "/imagenes/empresa/ empresas del metal/6.jpg"
 
}
 
function CompruebaVersion() {
if (navigator.appVersion.charAt(0) >= 3 && document.images) return true
else return false
}
 
function CreaArray(n) {
this.length = n
for (var i = 1; i<=n; i++) {
this[i] = new Image()
}
return this
}
 
function DetenerSecuencia () {
if( SecuenciaEjecutandose )
clearTimeout(SecuenciaID)
SecuenciaEjecutandose = false
imagen = 0
}
 
function MostrarSecuencia () {
if (CompruebaVersion()) {
document.images["secuencia"].src = imagenes[imagen].src
imagen++
if ( imagen == 6 )
imagen = 1
}
SecuenciaID = setTimeout(" MostrarSecuencia() ", duracion)
SecuenciaEjecutandose = true
}
 
function IniciarSecuencia () {
DetenerSecuencia()
imagen = 1
MostrarSecuencia()
}
 
</script>



Como digo no hay problema, pero si trato de poner en la misma web otro div, ya no funciona, osea funciona solo con él primero. Me han dicho de poner una clase, pero yo de javascript nose, me podría alguien decir que tengo que hacer.


Gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

secuencia de imagenes

Publicado por xve (1597 intervenciones) el 08/08/2012 18:03:33
Hola Carlos, cambia un poquito, aqui te he realizado como quedaria, aunque al no tener el codigo html de como se visualiza no puedo mostrarte como ejecutarlo, pero seria así:

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
<script type="text/javascript">
 
var mostrarImagenes={
    SecuenciaEjecutandose: 0,
    SecuenciaID:null,
    imagen:6,
    duracion:3100,
    imagenes:"",
 
    CompruebaVersion: function () {
        if (navigator.appVersion.charAt(0) >= 3 && document.images)
            return true
        else
            return false
    },
 
    CreaArray: function (n) {
        this.length = n
        for (var i = 1; i<=n; i++) {
            this[i] = new Image()
        }
        return this
    },
 
    DetenerSecuencia: function () {
        if( this.SecuenciaEjecutandose )
            clearTimeout(this.SecuenciaID)
        this.SecuenciaEjecutandose = false
        this.imagen = 0
    },
 
    MostrarSecuencia: function () {
        if (CompruebaVersion()) {
            document.images["secuencia"].src = imagenes[this.imagen].src
            this.imagen++
            if ( this.imagen == 6 )
                this.imagen = 1
        }
        this.SecuenciaID = setTimeout(" MostrarSecuencia() ", this.duracion)
        this.SecuenciaEjecutandose = true
    },
 
    IniciarSecuencia: function () {
        if ( this.CompruebaVersion() ) {
            this.images=new CreaArray( 6 )
            this.imagenes[1].src = "/imagenes/empresa/ empresas del metal/1.jpg"
            this.imagenes[2].src = "/imagenes/empresa/ empresas del metal/2.jpg"
            this.imagenes[3].src = "/imagenes/empresa/ empresas del metal/3.jpg"
            this.imagenes[4].src = "/imagenes/empresa/ empresas del metal/4.jpg"
            this.imagenes[5].src = "/imagenes/empresa/ empresas del metal/5.jpg"
            this.imagenes[6].src = "/imagenes/empresa/ empresas del metal/6.jpg"
        }
        DetenerSecuencia()
        this.imagen = 1
        MostrarSecuencia()
    },
};

Si nos puedes mostrar el codigo html de como lo ejecutas... me gustaria visualizarlo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

secuencia de imagenes

Publicado por carlos (11 intervenciones) el 08/08/2012 22:36:21
Claro no hay problema. El html del div que si me funciona es asi:

1
2
3
4
5
6
7
8
9
10
11
<div id="sesion">
 
 
 
<img src="/imagenes/empresa/ empresas del metal/1.jpg" width="250" height="250" alt="Secuencia" name="secuencia" >
 
 
 
 
 
</div>


Nada complicado, el segundo div, que es donde quiero que empiece la otra secuncia, probe a hacer lo mismo, pero llamandola secuencia2 y claro cambiando la ruta de las imagenes. Osea, ya digo que de javascrip, no tengo ni idea.
Lo que hice fue copiar el script otra vez, cambie la ruta de las imagenes del script, y en esta parte del script cambi esto:

1
2
3
4
5
6
7
8
9
10
11
12
13
function MostrarSecuencia () {
 
if (CompruebaVersion()) {
 
document.images["secuencia"].src = imagenes[imagen].src
imagen++
 
if ( imagen == 6 )
 
imagen = 1
 
}


Por esto:

1
2
3
4
5
6
7
8
9
10
11
12
13
function MostrarSecuencia () {
 
if (CompruebaVersion()) {
 
document.images["secuencia2"].src = imagenes[imagen].src
imagen++
 
if ( imagen == 6 )
 
imagen = 1
 
}


Y claro al segundo div donde quiero poner la secuencia le nombre secuencia2.
Pero no funciona. Solo consigo que lo haga siempre el primer div que lee el html.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

secuencia de imagenes

Publicado por xve (1597 intervenciones) el 09/08/2012 08:42:45
Hola Carlos, lo que no veo, es como inicias la secuencia de imágenes.... tienes un botón para ello? o al cargar la pagina ya empieza? lo digo porque veo que también hay una función para parar la secuencia...

Las llamadas al javascript, es donde varia, ya que ahora es una clase de javascript.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

secuencia de imagenes

Publicado por gatoher (11 intervenciones) el 19/08/2012 14:04:53
Hola xve, perdona que tardara en responder, pero estaba de vacaciones. Me fui al Pirineo. Bueno, de lo que se trata, es de que cuando cargue la página, empize la secuencia. Mi idea en crear un div y anidado dentro de él, varios div con varias secuencias de imagenes, que empicen a cambiar.
Osea, al entrar en la web, allá varias secuencias de imagenes que empiecen a cambiar cuando se entra en la web.
Lo que yo he conseguido con el script que puse es que se inicie una secuencia en un div. En el html el codigo del div es este:

1
<div id="sesion"> <img src="/imagenes/empresa/ empresas del metal/1.jpg" width="250" height="250" alt="Secuencia" name="secuencia" > </div>


Bien, este div si empieza la secuencia sin problemas. Pero, si yo quiero otros div en la misma página web, que al entrar en la página, sin hacer nada, empicen con otra secuencias de imagenes, ¿como lo hago?.

Es lo que quiero hacer, varias secuencias de imagenes, en varios div en la misma página web.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

secuencia de imagenes

Publicado por xve (1597 intervenciones) el 20/08/2012 08:48:58
Hola Carlos, ese código que me muestras, no inicia el código javascript, es html únicamente. Tienes que tener algo como $(document).ready() o onload() para iniciar el código de javascript...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

secuencia de imagenes

Publicado por gatoher (11 intervenciones) el 21/08/2012 23:04:20
Hola xve, a ver, para iniciar la secuencia tengo: <body onLoad="IniciarSecuencia()"> Pero la secuencia , claro esta en el body, pero en un div anidado, <div id="sesion">. Ahorra lo que quería es poner varios div, con distintas secuencias, que se iniciaran todas las secuencias cuando se carga la página.

He encontrado esto, peo no se como aplicarlo, ya digo que de javascript no se.

http://www.desarrolloweb.com/articulos/787.php

La verdad que me he atascado por que quería usarlo en una web, y sólo consigo que funcione una secuencia, .
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

secuencia de imagenes

Publicado por xve (1597 intervenciones) el 22/08/2012 18:29:50
Ok, me ha costado un poco pero aquí lo tienes utilizando una sola clase con 3 imágenes rotando y empezando cada uno con una imagen 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
<html>
 
<head>
<script type="text/javascript">
function mostrarImagenes(idDestino, imagenInicial){
    this.SecuenciaEjecutandose= 0;
    this.SecuenciaID=null;
    this.imagen=0;
    this.duracion=3000;
    this.imagenes="";
 
    this.showId=idDestino;
    this.imagenInicial=imagenInicial;
 
    this.CompruebaVersion= function () {
        if (navigator.appVersion.charAt(0) >= 3 && document.images)
            return true
        else
            return false
    };
 
    this.CreaArray= function (n) {
        this.length = n
        for (var i = 1; i<=n; i++) {
            this[i] = new Image()
        }
        return this
    };
 
    this.DetenerSecuencia= function () {
        if( this.SecuenciaEjecutandose )
            clearTimeout(this.SecuenciaID)
        this.SecuenciaEjecutandose = false
        this.imagen = this.imagenInicial
    };
 
    this.MostrarSecuencia= function () {
        if (this.CompruebaVersion()) {
            if(document.getElementById(this.showId))
                document.getElementById(this.showId).src = this.imagenes[this.imagen].src;
            this.imagen++;
            if ( this.imagen == 7 )
                this.imagen = 1
            this.SecuenciaEjecutandose = true
 
            var instant = this;
            this.SecuenciaID=setTimeout(function() { instant.MostrarSecuencia();}, this.duracion);
        }
    };
 
    this.IniciarSecuencia= function () {
        if (this.CompruebaVersion() ) {
            this.imagenes=new this.CreaArray( 6 )
            this.imagenes[1].src = "img1.jpg"
            this.imagenes[2].src = "img2.jpg"
            this.imagenes[3].src = "img3.jpg"
            this.imagenes[4].src = "img4.jpg"
            this.imagenes[5].src = "img5.jpg"
            this.imagenes[6].src = "img6.jpg"
            this.DetenerSecuencia()
            this.MostrarSecuencia();
        }
    };
};
</script>
</head>
 
<body>
 
<img src="img1.jpg" alt="Secuencia" id="secuencia1" >
<img src="img1.jpg" alt="Secuencia" id="secuencia2" >
<img src="img1.jpg" alt="Secuencia" id="secuencia3" >
 
</body>
 
</html>
<script type="text/javascript">
var img1=new mostrarImagenes("secuencia1",1);
var img2=new mostrarImagenes("secuencia2",2);
var img3=new mostrarImagenes("secuencia3",3);
img1.IniciarSecuencia();
img2.IniciarSecuencia();
img3.IniciarSecuencia();
</script>

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

secuencia de imagenes

Publicado por gatoher (11 intervenciones) el 22/08/2012 22:36:35
Gracias xve, pero tengo unas dudas,. A ver, como te digo de java script no se , pero, viendo tú scrip, veo que has hecho tres secuencias. Bien, pero a ver, la primera parte del script, parece ser más o menos como la que yo puse. Osea:

1
<html> <head> <script type="text/javascript"> function mostrarImagenes(idDestino, imagenInicial){ this.SecuenciaEjecutandose= 0; this.SecuenciaID=null; this.imagen=0; this.duracion=3000; this.imagenes=""; this.showId=idDestino; this.imagenInicial=imagenInicial; this.CompruebaVersion= function () { if (navigator.appVersion.charAt(0) >= 3 && document.images) return true else return false }; this.CreaArray= function (n) { this.length = n for (var i = 1; i<=n; i++) { this[i] = new Image() } return this }; this.DetenerSecuencia= function () { if( this.SecuenciaEjecutandose ) clearTimeout(this.SecuenciaID) this.SecuenciaEjecutandose = false this.imagen = this.imagenInicial }; this.MostrarSecuencia= function () { if (this.CompruebaVersion()) { if(document.getElementById(this.showId)) document.getElementById(this.showId).src = this.imagenes[this.imagen].src; this.imagen++; if ( this.imagen == 7 ) this.imagen = 1 this.SecuenciaEjecutandose = true var instant = this; this.SecuenciaID=setTimeout(function() { instant.MostrarSecuencia();}, this.duracion); } }; this.IniciarSecuencia= function () { if (this.CompruebaVersion() ) { this.imagenes=new this.CreaArray( 6 ) this.imagenes[1].src = "img1.jpg" this.imagenes[2].src = "img2.jpg" this.imagenes[3].src = "img3.jpg" this.imagenes[4].src = "img4.jpg" this.imagenes[5].src = "img5.jpg" this.imagenes[6].src = "img6.jpg" this.DetenerSecuencia() this.MostrarSecuencia(); } }; }; </script>


Bien, pero solo hay 6 imagenes, osea, esas 6 imagenes, son para una secuencia. Yo quiero que cada secuencia tenga imagenes distintas, ¿me comprendes?.

La segunda parte del script osea:

1
<body> <img src="img1.jpg" alt="Secuencia" id="secuencia1" > <img src="img1.jpg" alt="Secuencia" id="secuencia2" > <img src="img1.jpg" alt="Secuencia" id="secuencia3" > </body>


Esta clara, cada <img src="img1.jpg" alt="Secuencia" id="secuencia1" > va dentro de cada div donde quiero insertar la secuencia, eso creo tenerlo claro.
Pero lo que no me queda claro es la tercera parte, la que pones después de la etiqueta </html>. Osea, cieras </body>, cieras </html> y insertas:




1
</body> </html> <script type="text/javascript"> var img1=new mostrarImagenes("secuencia1",1); var img2=new mostrarImagenes("secuencia2",2); var img3=new mostrarImagenes("secuencia3",3); img1.IniciarSecuencia(); img2.IniciarSecuencia(); img3.IniciarSecuencia(); </script>



Como te digo yo de javascript no se, pero, yo cuando he usado scripts nunca he puesto nada debajo de </body> y </html>. Entonces mis dudas, son, si ¿puedo poner en cada secuencia imagenes distintas?. Segun veo tú script, parece ser que usan las mismas imagenes las tres secuencias. ¿Para iniciar las secuencias uso lo mismo que mi script?.

1
<body onLoad="IniciarSecuencia()">


¿Asi se inician todas las secuencias? Por que quiero que se inicien todas según se entra en la web.


Luego, ¿podría gastar más de tres secuencias? Tenía pensado unas 5 o 6 secuencias, con varias imagenes cada una, unas 5 o 6 imagenes por secuencia.


Veo que esto no es tan sencillo como pensaba xve, yo pensaba al principio, que copiando el script de una secuencia, y cambiandole el nombre del div donde se insertaba la secuencia hiba a bastar, pero veo que no.


GRACIAS POR TU AYUDA.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

secuencia de imagenes

Publicado por xve (1597 intervenciones) el 24/08/2012 16:30:09
Aqui tienes una nueva versión... esta versión hace exactamente lo que me comentas... creas tantos objetos como quieres, y ha cada uno, le indicas las imágenes que quieres que se visualicen.

Al pasar el ratón por encima se para la rotación de las imágenes, y cuando quitas el ratón, continua la rotación.

Si tienes cualquier duda me comentas, ok?

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
<html>
<head>
<script type="text/javascript">
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 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 la secuencia
    // En este ejemplo, se puede iniciar o parar la secuancia poniendo el raton
    // encima de la imagen.
    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() {
        document.getElementById(this.showId).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
    this.IniciarSecuencia=function(listadoImagenes) {
        this.listadoImagenes=listadoImagenes;
 
        this.imagenes=new this.CreaArray(listadoImagenes.length);
        for (var i = 0; i<listadoImagenes.length; i++) {
            this.imagenes[i].src = listadoImagenes[i];
        }
        this.MostrarSecuencia();
    };
};
 
var img1=new rotarImagenes("secuencia1",0);
var img2=new rotarImagenes("secuencia2",0);
var img3=new rotarImagenes("secuencia3",0);
var listadoImagenes1=[
    "img1.jpg",
    "img2.jpg",
    "img3.jpg",
    "img4.jpg",
    "img5.jpg",
    "img6.jpg"
];
var listadoImagenes2=[
    "img10.jpg",
    "img11.jpg",
    "img12.jpg",
    "img13.jpg",
    "img14.jpg"
];
var listadoImagenes3=[
    "img10.jpg",
    "img11.jpg"
];
 
function start_rotarImagenes()
{
    img1.IniciarSecuencia(listadoImagenes1);
    img2.IniciarSecuencia(listadoImagenes2);
    img3.IniciarSecuencia(listadoImagenes3);
}
</script>
</head>
 
<body onload="start_rotarImagenes()">
 
<img src="" alt="Secuencia" id="secuencia1" onmouseover="img1.Secuencia('stop')" onmouseout="img1.Secuencia('start')">
<img src="" alt="Secuencia" id="secuencia2" onmouseover="img2.Secuencia('stop')" onmouseout="img2.Secuencia('start')">
<img src="" alt="Secuencia" id="secuencia3" onmouseover="img3.Secuencia('stop')" onmouseout="img3.Secuencia('start')">
 
<div id="info"></div>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

secuencia de imagenes

Publicado por gatoher (11 intervenciones) el 24/08/2012 21:56:30
Gracias xve, mañana lo pruebo y te comento. A ver como funciona.

Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

secuencia de imagenes

Publicado por gatoher (11 intervenciones) el 25/08/2012 08:45:47
Hola xve. A ver, he montado un ejemplo y no me funciona. Creo que son las rutas a las imagenes, o la construcion de los div. No me llaman a las imagenes, ni siquiera aparece la primera imagen. Te pongo como lo he construido , he hecho un div contenedor y un div anidado para cada secuencia:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 <head>
 <link href="secuencias.css" rel="stylesheet" type="text/css" />
 
 <script type="text/javascript">
  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 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 la secuencia
   // En este ejemplo, se puede iniciar o parar la secuancia poniendo el raton 
   // encima de la imagen. 
   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() {
   			 document.getElementById(this.showId).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
     this.IniciarSecuencia=function(listadoImagenes) {
     this.listadoImagenes=listadoImagenes;
     this.imagenes=new this.CreaArray(listadoImagenes.length);
     for (var i = 0; i<listadoImagenes.length; i++)
     { this.imagenes[i].src = listadoImagenes[i];
     }
     this.MostrarSecuencia();
      };
      };
      //XVE tengo una carpeta por secuencia, llamadas arte1,arte2,arte3. Las imagenes se llaman 1.jpg,2.jpg,3.jpg etc...
      var img1=new rotarImagenes("secuencia1",0);
       var img2=new rotarImagenes("secuencia2",0);
        var img3=new rotarImagenes("secuencia3",0);
        var listadoImagenes1=[
        "/secuencia/arte/1.jpg",
         "/secuencia/arte/2.jpg",
         "/secuencia/arte/3.jpg",
         "/secuencia/arte/4.jpg",
          "/secuencia/arte/5.jpg",
          "/secuencia/arte/6.jpg"
           ];
 
           var listadoImagenes2=[
           "img10.jpg",
           "img11.jpg",
           "img12.jpg",
           "img13.jpg",
           "img14.jpg"
           ];
 
           var listadoImagenes3=[
           "img10.jpg",
           "img11.jpg"
           ];
 
           function start_rotarImagenes()
            {
            img1.IniciarSecuencia(listadoImagenes1);
            img2.IniciarSecuencia(listadoImagenes2);
             img3.IniciarSecuencia(listadoImagenes3);
             }
             </script>
             </head>
 
  //Luego he construido un div por secuencia, llamados    <div id="secuencia1">,   <div id="secuencia2,    <div id="secuencia3">">
 
             <body onload="start_rotarImagenes()">
 
             <div id="container">
 
            <div id="secuencia1">
             <img src="/secuencias/arte/1.jpg" width="410" height="310" alt="Secuencia" id="secuencia1" onmouseover="img1.Secuencia('stop')" onmouseout="img1.Secuencia('start')">
 
             </div>
 
         <div id="secuencia2">
             <img src="/secuencias/arte2/img1.jpg" alt="Secuencia" id="secuencia2" onmouseover="img2.Secuencia('stop')" onmouseout="img2.Secuencia('start')">
 
             </div>
 
             <div id="secuencia3">
             <img src="/secuencias/arte3/img1.jpg" alt="Secuencia" id="secuencia3" onmouseover="img3.Secuencia('stop')" onmouseout="img3.Secuencia('start')">
 
             </div>
 
             //Este div es tuyo, no lo he gastado
             <div id="info">
 
            </div>
             </html>


Seguramente sera un problema de como llamas tú a las imagenes en el script. Tú pones img10,img11,img13, etc etc dentro de cada "listadoImagenes". ¿Como debería llamar a las imagenes? Que ópinas
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

secuencia de imagenes

Publicado por xve (1597 intervenciones) el 25/08/2012 17:19:08
Tienes que poner la ruta hasta la imagen desde donde se ejecute el script... por ejemplo, si las imágenes están en la carpeta img, tendrías que poner algo así:
1
2
3
4
5
6
7
var listadoImagenes2=[
           "/img/img10.jpg",
           "/img/img11.jpg",
           "/img/img12.jpg",
           "/img/img13.jpg",
           "/img/img14.jpg"
           ];

Cada imagen puede estar en una ubicación diferente... indica la ruta de la misma para cada imagen.

Que editor utilizas para programar?? lo digo, porque tu código queda muy mal tabulado, y cuesta un poco de entender donde empiezan y terminan las funciones.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

secuencia de imagenes

Publicado por gatoher (11 intervenciones) el 26/08/2012 17:55:51
Hola xve, lo he repasado y las rutas estan bien. A ver, lo tengo en Apache en windows, por me gustaría probarlo en Linux pero he cambiado de distribución y tengo problemillas con Fedora. A ver si lo soluciono.
Mira, las imagenes estan en tres carpetas llamadas, arte1,arte2 y arte3. Dentro de cada carpeta hay 6 imagenes jpg, nombradas desdec1.jpg a 6.jpg. El archivo se llama secuencia.html.
El script lo deje asi:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 <head>
 <link href="secuencias.css" rel="stylesheet" type="text/css" />
 
 <script type="text/javascript">
  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 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 la secuencia
   // En este ejemplo, se puede iniciar o parar la secuancia poniendo el raton 
   // encima de la imagen. 
   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() {
   			 document.getElementById(this.showId).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
     this.IniciarSecuencia=function(listadoImagenes) {
     this.listadoImagenes=listadoImagenes;
     this.imagenes=new this.CreaArray(listadoImagenes.length);
     for (var i = 0; i<listadoImagenes.length; i++)
     { this.imagenes[i].src = listadoImagenes[i];
     }
     this.MostrarSecuencia();
      };
      };
 
      var img1=new rotarImagenes("secuencia1",0);
       var img2=new rotarImagenes("secuencia2",0);
        var img3=new rotarImagenes("secuencia3",0);
        var listadoImagenes1=[
        "/secuencias/arte/1.jpg",
         "/secuencias/arte/2.jpg",
         "/secuencias/arte/3.jpg",
         "/secuencias/arte/4.jpg",
          "/secuencias/arte/5.jpg",
          "/secuencias/arte/6.jpg"
           ];
   // Esta ruta es correcta, secuenciascarpeta donde estan los  html, css y carpetas con las imagenes, arte carpetas con las imagenes y 1.jpg nombre de la imagen
 
 
           var listadoImagenes2=[
           "/secuencias/arte2/1.jpg",
           "/secuencias/arte2/2.jpg",
           "/secuencias/arte2/3.jpg",
           "/secuencias/arte2/4.jpg",
           "/secuencias/arte2/5.jpg"
           ];
 
           var listadoImagenes3=[
           "/secuencias/arte3/1.jpg",
           "/secuencias/arte3/2.jpg"
           ];
 
           function start_rotarImagenes()
            {
            img1.IniciarSecuencia(listadoImagenes1);
            img2.IniciarSecuencia(listadoImagenes2);
             img3.IniciarSecuencia(listadoImagenes3);
// Debería cambiar img1,img2 y img3 por 1.jpg
 
             }
             </script>
             </head>
 
             <body onload="start_rotarImagenes()">
 
             <div id="container">
 
            <div id="secuencia1">
             <img src="/secuencias/arte/2.jpg" width="410" height="310" alt="Secuencia" id="secuencia1" onmouseover="img1.Secuencia('stop')" onmouseout="img1.Secuencia('start')">
 
             </div>
 
         <div id="secuencia2">
             <img src="/secuencias/arte2/1.jpg" alt="Secuencia" id="secuencia2" onmouseover="img2.Secuencia('stop')" onmouseout="img2.Secuencia('start')">
 
             </div>
 
             <div id="secuencia3">
             <img src="/secuencias/arte3/1.jpg" alt="Secuencia" id="secuencia3" onmouseover="img3.Secuencia('stop')" onmouseout="img3.Secuencia('start')">
             </div>
             <div id="info">
            </div>
             </html>
</body>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

secuencia de imagenes

Publicado por gatoher (11 intervenciones) el 26/08/2012 18:06:01
El script que tengo yo, de una secuencia de imagenes, que si funciona, lo tengo asi:
El body esta asi:

<body onLoad="IniciarSecuencia()">

Asi esta el div donde se inicia la secuencia:

<div id="sesion">
<img src="/prueba/imagenes/arte/1.jpg" width="410" height="310"
alt="Secuencia" name="secuencia" >
</div>
Como ves solo cambia el nombre de las carpetas, osea en lugar de:

<img src="/secuencias/arte3/1.jpg" alt="Secuencia" id="secuencia3" onmouseover="img3.Secuencia('stop')" onmouseout="img3.Secuencia('start')">

El script es asi:


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
<script language="JavaScript">
function cambiar (flag,img) {
if (document.images) {
if (document.images[img].permitirloaded) {
if (flag==1) document.images[img].src = document.images[img].permitir.src
else document.images[img].src = document.images[img].permitir.oldsrc
}
}
}
function preloadcambiar (img,adresse) {
if (document.images) {
img.onload = null;
img.permitir = new Image ();
img.permitir.oldsrc = img.src;
img.permitir.src = adresse;
img.permitirloaded = true;
}
}
</script>
 
 
 
<script language="javascript">
 
var SecuenciaEjecutandose = false
var SecuenciaID = null
var imagen = 6
var duracion = 3100
 
if ( CompruebaVersion() ) {
imagenes = new CreaArray( 6 )
imagenes[1].src = "/prueba/imagenes/arte/1.jpg"
imagenes[2].src = "/prueba/imagenes/arte/2.jpg"
imagenes[3].src = "/prueba/imagenes/arte/3.jpg"
imagenes[4].src = "/prueba/imagenes/arte/4.jpg"
imagenes[5].src = "/prueba/imagenes/arte/5.jpg"
imagenes[6].src = "/prueba/imagenes/arte/6.jpg"
 
}
 
function CompruebaVersion() {
if (navigator.appVersion.charAt(0) >= 3 && document.images) return true
else return false
}
 
function CreaArray(n) {
this.length = n
for (var i = 1; i<=n; i++) {
this[i] = new Image()
}
return this
}
 
function DetenerSecuencia () {
if( SecuenciaEjecutandose )
clearTimeout(SecuenciaID)
SecuenciaEjecutandose = false
imagen = 0
}
 
function MostrarSecuencia () {
if (CompruebaVersion()) {
document.images["secuencia"].src = imagenes[imagen].src
imagen++
if ( imagen == 6 )
imagen = 1
}
SecuenciaID = setTimeout(" MostrarSecuencia() ", duracion)
SecuenciaEjecutandose = true
}
 
function IniciarSecuencia () {
DetenerSecuencia()
imagen = 1
MostrarSecuencia()
}
 
</script>


Osea, no creo que sea problema de rutas, las he revisado y estan bien, en el html por lo menos.
A ti te funciona el script, no me importa cambiar el nombre a las imagenes ni las carpetas donde las almaceno. Si te funciona a ti dime como las has llamado y pruebo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

secuencia de imagenes

Publicado por xve (1597 intervenciones) el 27/08/2012 08:07:59
El problema que tienes, es que has creado un div con el mismo id que la imagen, por eso no te funciona... no pueden haber dos id's iguales en una pagina web!!!
Elimina estas lineas:
<div id="secuencia1">
<div id="secuencia2">
<div id="secuencia3">
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

secuencia de imagenes

Publicado por gatoher (11 intervenciones) el 27/08/2012 12:10:51
Bueno xve, la verdad que no lo vi. He modificado el nombre de los tres div, y el nombre de las imagenes a img1.jpg, img2.jpg asi con todas. La verda que ahorra si salen las tres imagenes, incluso la parte de que no empiecen todas por la img1.jpg sino cada div empieza con una imagen distinta. Pero sigue sin funcionar las secuencias.
El script lo deje asi:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 <head>
 <link href="secuencia.css" rel="stylesheet" type="text/css" />
 
 <script type="text/javascript">
  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 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 la secuencia
   // En este ejemplo, se puede iniciar o parar la secuancia poniendo el raton 
   // encima de la imagen. 
   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() {
   			 document.getElementById(this.showId).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
     this.IniciarSecuencia=function(listadoImagenes) {
     this.listadoImagenes=listadoImagenes;
     this.imagenes=new this.CreaArray(listadoImagenes.length);
     for (var i = 0; i<listadoImagenes.length; i++)
     { this.imagenes[i].src = listadoImagenes[i];
     }
     this.MostrarSecuencia();
      };
      };
 
      var img1=new rotarImagenes("secuencia1",0);
       var img2=new rotarImagenes("secuencia2",0);
        var img3=new rotarImagenes("secuencia3",0);
        var listadoImagenes1=[
        "/efecto/arte/img1.jpg",
         "/efecto/arte/img2.jpg",
         "/efecto/arte/img3.jpg",
         "/efecto/arte/img4.jpg",
          "/efecto/arte/img5.jpg",
          "/efecto/arte/img6.jpg"
           ];
 
           var listadoImagenes2=[
           "/efecto/arte2/img1.jpg",
           "/efecto/arte2/img2.jpg",
           "/efecto/arte2/img3.jpg",
           "/efecto/arte2/img4.jpg",
           "/efecto/arte2/img5.jpg"
           ];
 
           var listadoImagenes3=[
           "/efecto/arte3/img1.jpg",
           "/efecto/arte3/img2.jpg"
           ];
 
           function start_rotarImagenes()
            {
            img1.IniciarSecuencia(listadoImagenes1);
            img2.IniciarSecuencia(listadoImagenes2);
             img3.IniciarSecuencia(listadoImagenes3);
             }
             </script>
             </head>
 
 
 
 
             <body onload="start_rotarImagenes()">
 
             <div id="container">
 
            <div id="primero">
             <img src="/efecto/arte/img1.jpg"  alt="Secuencia" id="secuencia1" onmouseover="img1.Secuencia('stop')" onmouseout="img1.Secuencia('start')">
 
          </div>
          <div id="segundo">
 
             <img src="/efecto/arte2/img3.jpg" alt="Secuencia" id="secuencia2" onmouseover="img2.Secuencia('stop')" onmouseout="img2.Secuencia('start')">
 
             </div>
 
             <div id="tercero">
             <img src="/efecto/arte3/img2.jpg" alt="Secuencia" id="secuencia3" onmouseover="img3.Secuencia('stop')" onmouseout="img3.Secuencia('start')">
             </div>
 
             </div>
 
             <div id="info">
           </div>
             </html>
</body>


Ahorra que las primeras imagenes si salen, ya no donde puede estar el fallo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

secuencia de imagenes

Publicado por andre (1 intervención) el 24/10/2012 04:03:49
Genio, mil gracias! me estaba volviendo loca y me solucionaste el problema, gracias!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

secuencia de imagenes

Publicado por Erik (1 intervención) el 13/09/2013 02:03:21
Perdon que pregunte pero pues modifique un poco el codigo solo para una serie de imagenes y quedo algo asi

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <script type="text/javascript">
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 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 la secuencia
// En este ejemplo, se puede iniciar o parar la secuancia poniendo el raton
// encima de la imagen.
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() {
document.getElementById(this.showId).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
this.IniciarSecuencia=function(listadoImagenes) {
this.listadoImagenes=listadoImagenes;
this.imagenes=new this.CreaArray(listadoImagenes.length);
for (var i = 0; i<listadoImagenes.length; i++) {
this.imagenes[i].src = listadoImagenes[i];
}
this.MostrarSecuencia();
};
};
var img2=new rotarImagenes("secuencia2",0);
var listadoImagenes2=[
"http://i38.servimg.com/u/f38/18/42/32/70/gear_p10.jpg",
"http://i38.servimg.com/u/f38/18/42/32/70/god_of10.jpg",
"http://i38.servimg.com/u/f38/18/42/32/70/comput10.jpg",
"http://i38.servimg.com/u/f38/18/42/32/70/foro_p10.jpg",
"http://i38.servimg.com/u/f38/18/42/32/70/portad12.jpg"
];
function start_rotarImagenes()
{
img2.IniciarSecuencia(listadoImagenes2);
}
  </script>
  <title></title>
</head>
<body onload="start_rotarImagenes()">
<br>
<img src="" alt="Secuencia" id="secuencia2"
 onmouseover="img2.Secuencia('stop')"
 onmouseout="img2.Secuencia('start')">
<div id="info"><br>
</div>
</body>
</html>

Y me funciona correctamente solo que quisiera que cada imagen al darle click me mande una pagina me pueden ayudar con el codigo porfavor ?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar