This method is completely standalone and does not require jQuery or any other plugin or library. It has been tested and works in latest versions of all browsers.
View a demo here (right click to get the whole source at once) or view the step-by-step instructions below...
Please see my note before copying my code - thank you! >
Add this between your head tags. You can tweak the speeds etc in the BANNER SETUP section at the top.
//ROTATING BANNER BY CIARAN O'KELLY 2012 - BLOG.CRONDESIGN.COM
//BANNER SETUP:
var imageCount = 5; //how many images in total?
var changeSpeed = 3; //how many seconds between fades?
var fadeSpeed = 0.5; //how many seconds should the fade take?
var fps = 25; //animation frames per second
//BANNER FUNCTIONS:
var topImgID
var changeInterval
function $(id){ //just a shortcut function:
return(document.getElementById(id));
}
function changeOpac(obj, opacity) {//change the opacity for different browsers:
obj = obj.style;
obj.opacity = (opacity / 100);
obj.MozOpacity = (opacity / 100);
obj.KhtmlOpacity = (opacity / 100);
obj.filter = "alpha(opacity=" + opacity + ")";
}
function changeImage(){
var nextImgID = ( topImgID+1 <= imageCount ? topImgID+1 : 1 ); //get id number of next image in list
var nextImg = $('banner'+nextImgID);
var lastImg = $('banner'+topImgID);
var opac = 0;
changeOpac( nextImg, opac) //make next image invisible, then bring it to the top:
lastImg.style.zIndex = 2;
nextImg.style.zIndex = 3;
var fadeInterval = setInterval(function(){ //run fade on interval:
if(opac < 100){//continue fade:
opac += Math.ceil(100/(fadeSpeed*fps));
changeOpac(nextImg, opac);
}else{//end fade:
lastImg.style.zIndex = 1;
clearInterval(fadeInterval);
}
}, 1000/fps)
topImgID = nextImgID; //prepare next fade
}
function startBanner(firstImageID){
topImgID = (firstImageID==undefined ? 1+Math.floor(Math.random()*(imageCount)) : firstImageID);
$('banner'+topImgID).style.zIndex = 2;
changeInterval = setInterval(changeImage, changeSpeed*1000);
}
.banner{position:absolute; z-index:1; height:230px; width:720px; top:0px; background:#FFF; border:solid 1px #CCC}
.banner h1{position: absolute; bottom:20px; right:20px; font-style:italic; color:#444; float:right; width:50%; font-size:40px; text-align:right; line-height:100%;}
#banner1{background-image:url(banner1.jpg);}
#banner2{background-image:url(banner2.jpg);}
#banner3{background:#F90}
#banner4{background:#FFC}
#banner5{background:#99CCFF}
<div id="banner2" class="banner">
<h1>It runs on a loop</h1>
</div>
<div id="banner3" class="banner">
<h1>The images are actually div tags</h1>
</div>
<div id="banner4" class="banner">
<h1>So they can contain text, colours or other content</h1>
</div>
<div id="banner5" class="banner">
<h1>You can control the speed, the start image & number of images</h1>
</div>
<div id="banner1" class="banner">
<h1>This banner fades between images</h1>
</div>
<body onload="startBanner(1)">
137 comments:
Post a Comment