Rotación de banners

[kardo]

Hola a todos.

he usado un script para rotar banner y va perfecto pero tengo un problema. Cambia de banner cada minuto y el banner es aleatorio. Lo que yo necesito es que cambie cada minuto pero que solo la primera vez sea aleatorio. a partir del primer random, necesito que siga el orden de la lista.

He intentado modificar la variable "actual" pero no lo he conseguido...

Este es el script, muchas gracias de antemano:

var json = {
"rotator": {
"timer": "01",//Tiempo en minutos del intervalo de cambio
//Insertar tantas como imagenes iran en el banner
"images": [
{
"title": "Banner1",//Título del banner
"imageUrl": "_aux_images_banner/banner1.gif", //Url del banner
"url":"web1/",//Enlece al que irá al hacer click
"target":"_blank" //Destino del enlace del banner
},
{
"title": "Banner2",
"imageUrl": "_aux_images_banner/banner2.jpg",
"url": "web2",
"target":"_blank"
},
{
"title": "Banner3",
"imageUrl": "_aux_images_banner/banner3.gif",
"url": "web3",
"target":"_blank"
},
{
"title": "Banner4",
"imageUrl": "_aux_images_banner/banner4.gif",
"url": "web4",
"target":"_blank"
}
]
}
};

function print() {
var itemsRotator = eval(json);
var itemsCount = itemsRotator.rotator.images.length;
var prints = (itemsCount) - 0;
var actual = parseInt(Math.random() * prints);
//Contenedor de el rotador de banner
var container = document.getElementById('banner');

if (container) {
container.innerHTML = "<a target=\"_blank\" href=\""
+ itemsRotator.rotator.images[actual].url
+ "\"><img border=\"0\" alt=\""+itemsRotator.rotator.images[actual].title
+"\" title=\""+itemsRotator.rotator.images[actual].title
+"\" src=\""+itemsRotator.rotator.images[actual].imageUrl
+"\"/></a>";
}
}
function rotator() {
print();
var itemsRotator = eval(json);
setInterval("print()", itemsRotator.rotator.timer * 60000);
}

[_cronos2]

Pon la variable como global, así sólo será aleatorio una vez. Después en la función añades un if para ver si actual es menor que el length de las imágenes, si es igual lo igualas a 0, y al final de la función añades actual++.
Por cierto, no hace falta escapar las comillas (\") vale con usar ' (comillas simples). Y para el número aleatorio, en vez de usar parseInt() usa Math.round(), parseInt() convierte a entero, pero no tengo claro si lo hace al más próximo (o Math.round()), al inferior (o Math.floor()) o al superior (o Math.ceil()).
Saludos (:

[kardo]

Buenas _cronos2.
gracias por la ayuda pero estoy un poco perdido en java script. ¿como se pone la variable en global?
¿sustituyo el if por el que me dices?

[kardo]

¿podrías guiarme un poquillo?
No he tocado apenas javascript...
Gracias.

[_cronos2]

Hola, acabo de ver el mensaje, lo siento. Por ejemplo:

Código Javascript:

//var json = eval(...)
//donde los puntos suspensivos pon todo lo de las imágenes y eso
var prints = json.rotator.images;
var r = Math.round(Math.random()*prints.length);
function print() {
  r=r<prints.length?r:0;
  var container = document.getElementById('banner');
  if (container) {
   container.innerHTML = "<a target='_blank' href='"
   + prints[r].url
   + "'><img border='0' alt='" + prints[r].title
   +"' title='"+ prints[r].title
   +"' src='"+ prints[r].imageUrl
   +"' /></a>";
   r++;
  }
}
function rotator() {
 setInterval("print()", json.rotator.timer*60000);
}
 

Saludos (:

[stock]

Hola Amigos, veo muchas malas prácticas en el código que muestran, el mal uso del namespace, el mal uso de la función setTimeout, mal uso del contexto, mal uso del scope, les ayudaré un poquito refactorizando el código inicial de la siguiente manera:


En algún archivo JS crear el prototipo Rotador

Código Javascript:

/**
 *  Constructor de Rotador 
 *  @param container: recibe el ID del contenedor donde se renderizará
 *  @param data: información de imágenes y configuraciones
 *
 **/
var Rotador = function(container,data){
    this.container = document.getElementById(container);
    this.data = data
    this.prints = json.rotator.images;
    this.timer = json.rotator.timer;
    this.r = Math.round(Math.random()*this.prints.length);
}
 
Rotador.prototype = {
    //imprime una imagen
    print   : function() {
        this.r = this.r < this.prints.length?this.r:0;
 
        if(this.container) {
            var img = this.prints[this.r];
            container.innerHTML = "<a target='_blank' href='"+ img.url+ "'>"
                        + "<img border='0' alt='" + img.title + "' title='" + img.title + "' src='"+ img.imageUrl+ "' />"
                        + "</a>";
        }
        this.r++;
    },
    
    //crea un intervalo que imprime las imagenes consecutivas
    rotator : function() {
        this.thread = setInterval(this.print, this.timer*6000); //no usen un string para ejecutar la función!!!
    },
    
    //inicia el proceso de pintado
    start   : function(){
        this.print();
        this.rotator();
    }
}
 

Ahora, para usar el prototipo anterior, se hace de la siguiente manera:

Código Javascript:

//Este es un objeto listo para usarse, no es necesario
//usar el "eval" para obtener la información
var json = {
    rotator : {
        timer   : 01,   //Tiempo en minutos del intervalo de cambio
        images  : [{    //Insertar tantas como imagenes iran en el banner
            title   : "Banner1",    //Título del banner
            imageUrl: "_aux_images_banner/banner1.gif", //Url del banner
            url     : "web1/",  //Enlece al que irá al hacer click
            target  : "_blank" //Destino del enlace del banner
        },{
            title   : "Banner2",
            imageUrl: "_aux_images_banner/banner2.jpg",
            url     : "web2",
            target  : "_blank"
        },{
            title   : "Banner3",
            imageUrl: "_aux_images_banner/banner3.gif",
            url     : "web3",
            target  : "_blank"
        },{
            title   : "Banner4",
            imageUrl: "_aux_images_banner/banner4.gif",
            url     : "web4",
            target  : "_blank"
        }]
    }
};
 
//forma de uso ;)
var rotador1 = new Rotador("banner",json);
var rotador2 = new Rotador("otroContenedor",json);
 

Si se han dado cuenta puedo crear instancias del objeto "Rotador" por lo tanto puedo poner varios rotadores en la página, el código es reutilizable, extendible, limpio y fácil de usar.

Si tienen alguna duda pueden dejar comentarios. Espero les sirva de ejemplo para escribir buen JavaScript.

Saludos

[kardo]

Muchas gracias a los dos por la ayuda pero está claro que javascript no es lo mio

He copiado tu codigo en un js y no me funciona. ¿que hago mal? las dos variables, ¿hay que ponerlas? Sigo el codigo y lo entiendo pero no me funciona.

_cronos2, tu codigo tampoco me funciona


var json = {
rotator : {
timer : 01,
images : [{
title : "Banner1",
imageUrl: "_aux_images_banner/banner1.gif",
url : "http://www.terra.es",
target : "_blank"
},{
title : "Banner2",
imageUrl: "_aux_images_banner/banner2.jpg",
url : "http://www.terra.es",
target : "_blank"
},{
title : "Banner3",
imageUrl: "_aux_images_banner/banner3.gif",
url : "http://www.terra.es",
target : "_blank"
},{
title : "Banner4",
imageUrl: "_aux_images_banner/banner4.gif",
url : "http://www.terra.es",
target : "_blank"
}]
}
};

//forma de uso ;)
//var rotador1 = new Rotador("banner",json);
//var rotador2 = new Rotador("otroContenedor",json);
///////////////////////////////////////////////////////////////
/**
* Constructor de Rotador
* @param container: recibe el ID del contenedor donde se renderizará
* @param data: información de imágenes y configuraciones
*
**/
var Rotador = function(container,data){
this.container = document.getElementById(container);
this.data = data
this.prints = json.rotator.images;
this.timer = json.rotator.timer;
this.r = Math.round(Math.random()*this.prints.length);
}

Rotador.prototype = {
//imprime una imagen
print : function() {
this.r = this.r < this.prints.length?this.r:0;

if(this.container) {
var img = this.prints[this.r];
container.innerHTML = "<a target='_blank' href='"+ img.url+ "'>"
+ "<img border='0' alt='" + img.title + "' title='" + img.title + "' src='"+ img.imageUrl+ "' />"
+ "</a>";
}
this.r++;
},

//crea un intervalo que imprime las imagenes consecutivas
rotator : function() {
this.thread = setInterval(this.print, this.timer*6000); //no usen un string para ejecutar la función!!!
},

//inicia el proceso de pintado
start : function(){
this.print();
this.rotator();
}
}

[stock]

Ya ejecutaste el método "start"?? si no lo haces no pasará nada!! ;)

Código Javascript:

var rotador1 = new Rotador("banner",json);
rotador1.start();
 

saludos

[kardo]

¿como se inicia?
yo he copiado todo el texto en un archivo js pero no carga ningún banner.
como ves no tengo mucha idea de js...
gracias de antemano.

[kardo]

Ya le he hecho funcionar.
Muchisimas gracias por la ayuda.