SlideShow con Arrays

[Gropo]

Hola,

Estoy buscando un visor de imagenes que trabaje con arrays. Tengo uno llamado photofader pero no tiene botones para poderlo parar ir para adelante o atras. Si podria poner botones al photofader seria genial.

Me gustaria que sea como este: http://www.costablanca-villa.com/pro...=MAVA2116-VI-5

El Codigo del photofader es:
function photofader(nm, mainDiv, imgArr){
this.name = nm;
this.imgArr = imgArr;
this.curImg = 0;
this.curDiv = 1;

var mainDv = document.getElementById(mainDiv);

document.pfObj = this;

document.write("<style type='text/css'>\n");
document.write("#pf_photo1 img { visibility:hidden; }\n");
document.write("#pf_photo1 { position:absolute; z-index: 1; }\n");
document.write("#pf_photo2 { position:absolute; z-index: 0; }\n");
document.write("</style>");

this.preloadImages = function(){
for(var i=0; i<this.imgArr.length; i++){
eval("var pimg"+i+" = new Image();");
eval("pimg"+i+".src = '"+ this.imgArr[i] +"';");
}

this.initImages();
}


this.initImages = function() {
var hldr1 = "pf_photo1";
var hldr2 = "pf_photo2";

var dv1 = document.createElement("div");
dv1.id = "pf_photo1";
dv1.innerHTML = "<img src='"+ imgArr[0] +"' height='450' width='600' />";
var dv2 = document.createElement("div");
dv2.id = "pf_photo2";

mainDv.appendChild(dv1);
mainDv.appendChild(dv2);

image1 = document.getElementById(hldr1).childNodes[0];

setOpacity(image1, 0);
image1.style.visibility = 'visible';
fadeIn(hldr1,0);
}

this.preloadImages();
}

function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;

// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";

// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;

// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;

// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}

function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId).childNodes[0];
if (opacity < 100) {
speed = (speed < 2)?2:speed;
setOpacity(obj, opacity);
opacityDif = Math.ceil((100-opacity)/speed);
opacity += opacityDif;
//opacity += 2;
window.setTimeout("fadeIn('"+objId+"',"+opacity+") ", 100);
}
else
setTimeout("swapImages()",delay*1000);
}
}

function swapImages(){
// find out which
if(document.pfObj.curImg == document.pfObj.imgArr.length-1)
document.pfObj.curImg = 0;
else
++document.pfObj.curImg;

// now get the div to hld the new image
var dvName = (document.pfObj.curDiv == 1)?"pf_photo2":"pf_photo1";
var eDivName = (document.pfObj.curDiv == 1)?"pf_photo1":"pf_photo2";
document.pfObj.curDiv = (document.pfObj.curDiv == 1)?2:1;

var tgtDiv = document.getElementById(dvName);
var eDiv = document.getElementById(eDivName);

// now fill the target div
tgtDiv.innerHTML = "<img src='"+ document.pfObj.imgArr[document.pfObj.curImg] +"' style='visibility:hidden;' height='450' width='600' />";

//move the divs around in z-index
eDiv.style.zIndex = 0;
tgtDiv.style.zIndex = 1;

// And finally fade in the image

var img = tgtDiv.childNodes[0];

setOpacity(img, 0);
img.style.visibility = 'visible';
fadeIn(tgtDiv.id,0);
}


Muchisimas gracias por adelantado.