david chan's blog

<style>
div.Headline { display: none; }
</style>
<div id="divHeadlines">
    <div class="Headline"><a href="#">Link 1</a></div>
    <div class="Headline"><a href="#">Link 2</a></div>
</div>

<script type="text/javascript">
var arrHeadlines = null; 	// array to hold headline objects
var intAniDuration = 1;		// duration of transition animation (seconds)
var intViewDuration = 5;	// time before rotation (seconds)
 
function Init()
{
    if ($('divHeadlines'))
    {
        // get all headlines
        arrHeadlines = $('divHeadlines').getElements('div[class=Headline]');	
        // convert time to milliseconds        
        intAniDuration = intAniDuration * 1000;
        intViewDuration = intViewDuration * 1000;
        if (arrHeadlines != null && arrHeadlines.length > 0)
        {
            // hide all
            for (var i = 0; i < arrHeadlines.length; i++)
            {
                var fx = new Fx.Styles(arrHeadlines[i], { duration:0, wait:false });
                fx.set({ 'opacity': 0 });
            }
            // show first link
            ShowHeadline(0);
        }
    }
}
 
function ShowHeadline(idx)
{
    var oTargetDiv = arrHeadlines[idx];
    oTargetDiv.style.display = "block";   // make div appear
    var fx = new Fx.Styles(oTargetDiv, { duration:intAniDuration, wait:false });
    fx.start({ 'opacity': 1 });     // set opacity to visible
    // in X seconds time, hide this headline's div
    setTimeout("HideHeadline(" + idx + ")", intViewDuration)
}
 
function HideHeadline(idx)
{
    // get index of next headline to show
    var newIdx = idx + 1;
    if (newIdx >= arrHeadlines.length)
        newIdx = 0;    // reset index
    var oTargetDiv = arrHeadlines[idx];
    var fx = new Fx.Styles(oTargetDiv, { duration:intAniDuration, wait:false,
        onComplete:function(){
            oTargetDiv.style.display = "none"; ShowHeadline(newIdx);
        }/*end onComplete*/ });
    fx.start({ 'opacity': 0 });     // set to fade out, on complete, show next headline
}
 
// call Init after everything loads
Init();
</script>