I just wrote something like this. It fades divs in and out without using a js library
Here’s the markup
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Opacity Rotator</title>
<link rel="stylesheet" type="text/css" href="css/opacity.css" />
</head>
<body>
<div id="stackcontainer">
<div id="stack1">
<img src="images/slide1.jpg" alt="slide 1" />
</div>
<div id="stack2">
<img src="images/slide2.jpg" alt="slide 2" />
</div>
<div id="stack3">
<img src="images/slide3.jpg" alt="slide 3" />
</div>
<div id="stack4">
<img src="images/slide4.jpg" alt="slide 4" />
</div>
</div>
<div id="nav">
<div id="button1">
<a href="#" title="stack1" onclick="switchToStack('stack1')"><img src="images/button1.jpg" alt="button 1" /></a>
</div>
<div id="button2">
<a href="#" title="stack2" onclick="switchToStack('stack2')"><img src="images/button2.jpg" alt="button 2" /></a>
</div>
<div id="button3">
<a href="#" title="stack3" onclick="switchToStack('stack3')"><img src="images/button3.jpg" alt="button 3" /></a>
</div>
<div id="button4">
<a href="#" title="stack4" onclick="switchToStack('stack4')"><img src="images/button4.jpg" alt="button 4" /></a>
</div>
</div>
<script type="text/javascript" src="js/opacityfunctions.js"></script>
<script type="text/javascript">
clearStacks();
imgRotation();
</script>
</body>
</html>
And here’s the js
/************************************************
* Caution: This program sucks. Use at your own *
* terrible horrible risk. You have been warned *
* of the suck of this program. *
* *
* p.s. yeah yeah there's global variables, get *
* off my back MOM *
*************************************************/
function clearStacks() {
var stack1 = document.getElementById("stack1");
var stack2 = document.getElementById("stack2");
var stack3 = document.getElementById("stack3");
var stack4 = document.getElementById("stack4");
stack2.style.opacity = 0;
stack3.style.opacity = 0;
stack4.style.opacity = 0;
}
function SetOpacity(elem, opacityAsInt) {
var opacityAsDecimal = opacityAsInt;
if (opacityAsInt > 100)
opacityAsInt = opacityAsDecimal = 100;
else if (opacityAsInt < 0)
opacityAsInt = opacityAsDecimal = 0;
opacityAsDecimal /= 100;
if (opacityAsInt < 1)
opacityAsInt = 1; // IE7 bug, text smoothing cuts out if 0
elem.style.opacity = opacityAsDecimal;
elem.style.filter = "alpha(opacity=" + opacityAsInt + ")";
}
function FadeOpacity(elemId, fromOpacity, toOpacity, time, fps) {
var steps = Math.ceil(fps * (time / 1000));
var delta = (toOpacity - fromOpacity) / steps;
FadeOpacityStep(elemId, 0, steps, fromOpacity, delta, (time / steps));
}
function FadeOpacityStep(elemId, stepNum, steps, fromOpacity, delta, timePerStep) {
SetOpacity(document.getElementById(elemId), Math.round(parseInt(fromOpacity) + (delta * stepNum)));
if (stepNum < steps)
setTimeout("FadeOpacityStep('" + elemId + "', " + (stepNum+1) + ", " + steps + ", " + fromOpacity + ", " + delta + ", " + timePerStep + ");", timePerStep);
}
function switchToStack(stackId) {
stopRotation();
var currentStack = document.getElementById("stackId");
FadeOpacity("stack1", 0.0, 0.0, 10, 10);
FadeOpacity("stack2", 0.0, 0.0, 10, 10);
FadeOpacity("stack3", 0.0, 0.0, 10, 10);
FadeOpacity("stack4", 0.0, 0.0, 10, 10);
FadeOpacity(stackId, 30, 100, 500, 25);
}
var rotationIsOn = 0;
var tr, vr, ar, br, cr, dr, er, fr, gr;
function imgRotation() {
if (!rotationIsOn) {
rotationIsOn = 1;
tr=setTimeout("FadeOpacity('stack1', 0.0, 100, 500, 20);", 1); //fade in box 1
vr=setTimeout("FadeOpacity('stack1', 100, 0.0, 200, 20);", 7000); //fade out box 1
ar=setTimeout("FadeOpacity('stack2', 0.0, 100, 500, 25);", 7000); //fade in box 2
br=setTimeout("FadeOpacity('stack2', 100, 0.0, 200, 20);", 14000); //fade out box 2
cr=setTimeout("FadeOpacity('stack3', 0.0, 100, 500, 25);", 14000); //fade in box 3
dr=setTimeout("FadeOpacity('stack3', 100, 0.0, 200, 20);", 21000); //fade out box 3
er=setTimeout("FadeOpacity('stack4', 1.0, 100, 500, 25);", 21000); //fade in box 4
fr=setTimeout("FadeOpacity('stack4', 100, 0.0, 200, 20);", 28000); //fade out box 4
rotationIsOn = 0;
gr=setTimeout("imgRotation()", 28050); //start the whole thing again
}
};
function stopRotation() {
tr = clearTimeout(tr);
vr = clearTimeout(vr);
ar = clearTimeout(ar);
br = clearTimeout(br);
cr = clearTimeout(cr);
dr = clearTimeout(dr);
er = clearTimeout(er);
fr = clearTimeout(fr);
gr = clearTimeout(gr);
rotationIsOn = 0;
}
Good luck!