• 0

Background Rotator


Question

I swear that I have looked all over the internet for a rotator but it's like impossible. Anyway, what I'm trying to do is...

I have 3 header images, right now the css has the main header image set as the background, then I have a javascript rotator that will change the background randomly every 5 seconds with the images in the array. One problem is that it looks ugly without a transition (I'd like it to fade), and I also want it to go in sequence, not randomly.

Here is the code I'm using now, how can i get it to go in a sequence and to fade?

/*
 * Background Rotator for Header
 *
 */

function ChangeCSSBgImg() {
if (!document.getElementById) return false;

var MyElement = "header" 
var ImgPath = "/nmhs/images/"

if (!document.getElementById(MyElement)) return false;

var random_images = new Array ();
random_images[0] = "header.png";
random_images[1] = "header_students.png";
random_images[2] = "header_band.png";

var $header = document.getElementById(MyElement);
var $backgroundurl = $header.style.backgroundImage;
var ImgURL = "url(" + ImgPath + random_images[rand(random_images.length)] + ")";

if ($backgroundurl != ImgURL) {
$header.style.backgroundImage = ImgURL;
}

movement = setTimeout("ChangeCSSBgImg()",5000);
}

function rand(n) {
    return ( Math.floor ( Math.random ( ) * n ) );
}


function addLoadEvent(func) {
    var oldonload = window.onload;
        if (typeof window.onload != 'function') {
        window.onload = func;
        } else {
        window.onload = function() {
    oldonload();
func();
}
}
}

addLoadEvent(ChangeCSSBgImg);

Thanks (:

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

If you're willing to make the switch to jQuery, I'd suggest Innerfade.

However Innerfade requires each fading object to be an actual element inside a list.

If you have text or other elements inside your header that you need to stay there, you could use some CSS positioning to keep the images in place and under the text.

Link to comment
Share on other sites

  • 0

If you're willing to make the switch to jQuery, I'd suggest Innerfade.

However Innerfade requires each fading object to be an actual element inside a list.

If you have text or other elements inside your header that you need to stay there, you could use some CSS positioning to keep the images in place and under the text.

this is what I ended up doing except with Cycle. Easier than I thought it would be. Thanks :D

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.