Hello all! I'd like some help with some code to fade in and out banner images on my website. Basically, the idea is that every 10 seconds, the image will fade out as another image fades in. The way I am trying to accomplish this is by changing the opacity values of the two images. My problem is in the "fade" function. elem1 begins at opacity:1, whereas elem2 begins at opacity:0. When I decrement elem1.style.opacity, everything works just fine, but when I try to increment elem2.style.opacity, it successfully increments it the first time "step" is called, but then the opacity remains at .025 and won't increment any further. Does anyone have any ideas as to why this is? Thank you for your help.
var currentCount = 1;
var imageCount = 3;
var interval = .025;
function changeImage() {
var string = "b" + currentCount;
currentCount++;
if(currentCount > imageCount) {
currentCount = 1;
}
var newString = "b" + currentCount;
fadeOpacity(string, newString);
}
function fadeOpacity(string1, string2) {
var elem1 = document.getElementById(string1);
var elem2 = document.getElementById(string2);
fade(elem1, elem2);
}
function fade(elem1, elem2) {
step(elem1, elem2);
if(elem1.style.opacity > 0) {
window.setTimeout(fade(elem1, elem2), 25);
}
}
function step(elem1, elem2) {
elem2.style.opacity += interval;
elem1.style.opacity -= interval;
}
function init() {
document.getElementById("b1").style.opacity=1.0;
document.getElementById("b2").style.opacity=0.0;
document.getElementById("b3").style.opacity=0.0;
window.setInterval(changeImage, 10000);
}
window.onload=init;