Hola Compañeros, estoy teniendo el siguiente inconveniente, he podido realizar un banner con 5 imagenes, y estas se van intercalando con efecto fade, pero necesito tener 5 botones para poder ir a una imagen especifica deseada, es decir al clickear el boton 3 que salte a la imagen 3 directamente con el efecto fade.
este es el codigo funcionando:
<Script type="text/javascript">
//BANNER SETUP:
var imageCount = 5;
var changeSpeed = 3;
var fadeSpeed = 0.5;
var fps = 25;
//BANNER FUNCTIONS:
var topImgID
var changeInterval
function $(id){ //just a shortcut function:
return(document.getElementById(id));
}
function changeOpac(obj, opacity) {//change the opacity for different browsers:
obj = obj.style;
obj.opacity = (opacity / 100);
obj.MozOpacity = (opacity / 100);
obj.KhtmlOpacity = (opacity / 100);
obj.filter = "alpha(opacity=" + opacity + ")";
}
function changeImage(){
var nextImgID = ( topImgID+1 <= imageCount ? topImgID+1 : 1 ); //get id number of next image in list
var nextImg = $('banner'+nextImgID);
var lastImg = $('banner'+topImgID);
var opac = 0;
changeOpac( nextImg, opac) //make next image invisible, then bring it to the top:
lastImg.style.zIndex = 2;
nextImg.style.zIndex = 3;
var fadeInterval = setInterval(function(){ //run fade on interval:
if(opac < 100){//continue fade:
opac += Math.ceil(100/(fadeSpeed*fps));
changeOpac(nextImg, opac);
}else{//end fade:
lastImg.style.zIndex = 1;
clearInterval(fadeInterval);
}
}, 2000/fps)
topImgID = nextImgID; //prepare next fade
}
function startBanner(firstImageID){
topImgID = (firstImageID==undefined ? 1+Math.floor(Math.random()*(imageCount)) : firstImageID);
$('banner'+topImgID).style.zIndex = 2;
changeInterval = setInterval(changeImage, changeSpeed*2000);
}
</script>
<body onload="startBanner(1)">
<div id="banner1" class="banner"></div>
<div id="banner2" class="banner"></div>
<div id="banner3" class="banner"></div>
<div id="banner4" class="banner"></div>
<div id="banner5" class="banner"></div>
la idea es tenner un banner con controles, con efecto fade.,Agradesco cualquier ayuda o ejemplo. muchas gracias