SlideShow [duda]

hiperdiabolico · #1 (**permalink**) 12/07/2010, 19:05

Buenas recurro a uds ya que tengo una duda que me tiene un poco retrasado, quisiera saber como hago para utilizar 2, slideshow a la vez es decir 2 transiciones de imagenes yo utilizo este codigo:

<head>


<script language="JavaScript">
var slideShowSpeed = 2500;
var crossFadeDuration = 3;
var Pic = new Array();
Pic[0] = 'Fotos/1.jpg'
Pic[1] = 'Fotos/2.jpg'
Pic[2] = 'Fotos/3.jpg'
Pic[3] = 'Fotos/4.jpg'
Pic[4] = 'Fotos/5.jpg'
Pic[5] = 'Fotos/6.jpg'
Pic[6] = 'Fotos/7.gif'
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans (duration=2)";
document.images.SlideShow.style.filter="blendTrans (duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply ();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play( );
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
</script>

</head>

<body onload="runSlideShow()">

<img border="0" width="400" height="300" name='SlideShow'>

</body>


Pero la verdad no se que tengo que cambiar para poder utilizarlo 2 veces en la misma pag se poco de javascript. a ver quien me da una mano

hiperdiabolico · #2 (**permalink**) 16/07/2010, 15:10

Nadie sabe??? =S

stock · #3 (**permalink**) 16/07/2010, 16:01

mmmmm..... rayos!! O_o

pufff..... por donde comenzar, bueno van mis consejos:

1.- Encapsula tu código
2.- Utiliza correctamente el scope
3.- Utiliza prototipos (clases)
4.- No "hardcodees" las imágenes que quieres utilizar
5.- Utiliza correctamente el setTimeout
6.- No escribas código solo para IE

Tomando en cuenta esos consejos te pongo un pequeño ejemplo para darte una idea:

Código Javascript:

Ver originalvar Slideshow = function(options){
     this.images = options.images;
     this.duration = options.duration;
     this.speed = options.speed;
 
     this.loadImages();
     this.start();
}
 
Slideshow.prototype = {
     loadImages   : function(){
          var p = this.images.length,
                preLoad = [];
           for (var i = 0; i < p; i++) {
               var img = new Image();
               img.src = this.images[i];
               preLoad.push(img);
          }
     },
 
     start   : function(){
          var me = this;
          this.j = 0;
          this.thread = setInterval(function(){
               me.run.call(me,me.j++);
          },this.speed);
     },
 
      run   : function(){
          //aqui el código de animación
          //te lo dejo de tarea :)
 
          if(this.j > this.images.length){
               //ya terminó!
               this.stop();
          }
      },
 
      stop   : function(){
          clearInterval(this.thread);
          this.j = 0;
      }
}
 
 
 
window.onload = function(){
     
     var slide1 = new Slideshow({
          images    : ["images/image1.jpg","images/image2.jpg","images/image3.jpg"],
          speed      : 2500,
          duration  : 3
     });
 
 
     var slide2 = new Slideshow({
          images    : ["images/image4.jpg","images/image4.jpg","images/imageN.jpg"],
          speed      : 2500,
          duration  : 3
     });
 
 
}

Por ultimo te aconsejo estar atento al desafío que se esta llevando acabo aqui en el foro de javascript: http://www.forosdelweb.com/f13/nuevo...agenes-822449/

Los participantes haremos un Slideshow con transiciones interesantes :)

Saludos

PD: No he probado el código, espero y te de una idea