Ver Mensaje Individual
  #1 (permalink)  
Antiguo 06/04/2010, 20:45
severicks
 
Fecha de Ingreso: septiembre-2009
Mensajes: 306
Antigüedad: 15 años, 2 meses
Puntos: 10
Ayuda con carrusel de imagenes dinamico

Hola.
Tengo un carrusel que arme a partir de varios tutoriales que encontré por ahí, este es el codigo que tengo:
Código HTML:
<div class="band left" id="left"></div>
	        <div class="band right" id="right"><a href="javascript:dispara(false,5);"><img src="/images/arrow_right.png" alt="" /></a></div>
          </div> 
Código:
var ancho = 620;
var total = 4;
var position = new Array(0,ancho*-1,ancho*-2);//ancho*-3,ancho*-total
var vel = 0;
var pos = 0;
var estado;
var move;
var posfinal = 0;
var coef;
var dir;
var activo = true;

function dispara(p,c){
	if(activo){
		estado = false;
		coef = c;
		dir = p;
		if(!dir){
			if(posfinal < position.length - 1){
				posfinal = posfinal + 1;
				//velocidad derecha
				move = setInterval(moving,20);
				activo = false;
				if(posfinal == position.length - 1){
					document.getElementById("right").innerHTML = "";
				}
				if(document.getElementById("left").childNodes.length != 1){
					document.getElementById("left").innerHTML = "<a href=\"javascript:dispara(true,"+ coef +");\"><img src=\"/images/arrow_left.png\" alt=\"\" /></a>";
				}
			}else{
				activo = true;
			}
		}else{
			if(posfinal > 0){
				posfinal = posfinal - 1;
				// velocidad
				move = setInterval(moving,20);
				activo = false;
				if(posfinal == 0){
					document.getElementById("left").innerHTML = "";
			
				}
				if(document.getElementById("right").childNodes.length != 1){
					document.getElementById("right").innerHTML = "<a href=\"javascript:dispara(false,"+ coef +");\"><img src=\"/images/arrow_right.png\" alt=\"\" /></a>";
				}
			}else{
				activo = true;
			}
		}
	}
}

function moving(){
	if(!dir){
		if(pos > position[posfinal] + (ancho/2)){
			vel-= coef;
		}else{
			if(!estado){
				pos = position[posfinal] + (ancho/2);
				vel-= coef;
			}
			vel+= coef;
			estado = true;
		}
		pos+= vel;
		if(pos <= position[posfinal]){
			pos = position[posfinal];
			clearInterval(move);
			vel = 0;
			activo = true;
		}
	}else{
		if(pos <= position[posfinal] - (ancho/2)){
			vel+= coef;
		}else{
			if(!estado){
				pos = position[posfinal] - (ancho/2);
				vel+= coef;
			}
			vel-= coef;
			estado = true;
		}
		pos+= vel;
		if(pos >= position[posfinal]){
			pos = position[posfinal];
			clearInterval(move);
			vel = 0;
			activo = true;
		}	
	}
	document.getElementById('slide').style.background = 'url(/images/background.jpg) no-repeat '+ pos +'px';
}
Necesito hacerle un par de cambios pero mis conocimientos en javascript es casi nulo. Me podrian ayudar con esto?
Necesito hacerle dos cambios:
-En lugar de que el carrusel muestre una sola foto larga muestre 6
-La direccion de las fotos las tengo en una base de datos asi que necesito que las lea de ahi con php(php lo manejo pero no se como combinarlo con js)

Si me pueden ayudar con esto se los agradeceré eternamente.
__________________
Mantente al tanto del acontecer Turistico nacional
Visita el Parque Bicentenario El Salvador