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.