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);
Question
classicdisastr
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