1. Cut and paste the first block of code into your html. In your body onload event call CycleQuotes().
2. Cut and paste the javascript into your page or into a .js file
3. Provide your own image files. I use eight of them to cover the four buttons and the four hover states.
<!-- Previous, Pause, Play, Next images --> <div id="playercontrols"> <img src="previous.png" alt="Previous" onclick="PrevClick()" onmouseover="this.src='previoushover.png'" onmouseout="this.src='previous.png'" /> <img id="pauseimg" src="pause.png" alt="Pause" onclick="PausePlayClick(false)" onmouseover="this.src='pausehover.png'" onmouseout="this.src='pause.png'" /> <img id="playimg" src="play.png" alt="Play" style="display: none;" onclick="PausePlayClick(true)" onmouseover="this.src='playhover.png'" onmouseout="this.src='play.png'" /> <img src="next.png" alt="Next" onclick="NextClick()" onmouseover="this.src='nexthover.png'" onmouseout="this.src='next.png'" /> </div> <div id="contentContainer"> <div id="content0" style="display: none;">Text</div> <div id="content0" style="display: none;">Slideshow</div> <div id="content0" style="display: none;">With</div> <div id="content0" style="display: none;">Fades</div> </div>
/* Remaining code from Thomas C Sherman @ http://blog.thomascsherman.com/
functions fade() and animateFade() from http://www.switchonthecode.com/tutorials/javascript-tutorial-simple-fade-animation */
var TimeToFade = 500.0; //time to fade in and fade out
var timeToShow = 3000.0; //how long to display each piece of content
var timeToRest = 750; //how long to wait before displaying next piece of content
var currentContentItem = 0; //which content item you wish to start with, zero based
var contentContainer; //the containing div
var contentItems; //all the content items
var fadeOutTimer; //timer for handling fade outs
var fadeInTimer; //timer for handling fade ins
function CycleQuotes()
{
//get all the divs inside the contentContainer div. Each of these is a unique quote
contentContainer = document.getElementById("contentContainer");
contentItems = contentContainer.getElementsByTagName("div");
contentItems[0].style.display = "block"; //all child divs are currently hidden so show the first one
setTimeout("FadeOut()", timeToShow);
}
function PrevClick()
{
PausePlayClick(false);
//make sure the current quote is displayed
contentItems[currentContentItem].style.display = "none";
//change the current quote
if (currentContentItem == 0)
{ currentContentItem = contentItems.length - 1; }
else
{ currentContentItem--; }
contentItems[currentContentItem].style.display = "block";
}
function NextClick()
{
PausePlayClick(false);
//make sure the current quote is displayed
contentItems[currentContentItem].style.display = "none";
//change the current quote
if (currentContentItem == contentItems.length - 1) { currentContentItem = 0; }
else { currentContentItem++; }
contentItems[currentContentItem].style.display = "block";
}
function PausePlayClick(playing)
{
//get the play/pause buttons
var playbutton = document.getElementById('playimg');
var pausebutton = document.getElementById('pauseimg');
//start/stop the current fade effects
if (playing)
{
//change play icon to pause
pausebutton.style.display = "";
playbutton.style.display = "none";
setTimeout("FadeOut()", 0);
}
else
{
//make sure we have a quote showing
if (contentContainer.FadeState < 0) { fade(contentContainer.id); }
//change pause icon to play icon
pausebutton.style.display = "none";
playbutton.style.display = "";
//stop timers
clearTimeout(fadeOutTimer);
clearTimeout(fadeInTimer);
}
}
//Fade out quote
function FadeOut()
{
fade(contentContainer.id);
fadeOutTimer = setTimeout("FadeQuote2()", TimeToFade + timeToRest);
}
//Fade new quote in
function FadeIn()
{
//hide the current quote (the container div will already have opacity set to 100% so this quote is currently invisible)
contentItems[currentContentItem].style.display = "none";
//show the next quote
if (currentContentItem == contentItems.length - 1) { currentContentItem = 0; }
else { currentContentItem++; }
contentItems[currentContentItem].style.display = "block";
//fade in the container
fade(contentContainer.id);
//recurse
fadeInTimer = setTimeout("FadeOut()", timeToShow);
}
function fade(eid) //function from http://www.switchonthecode.com/tutorials/javascript-tutorial-simple-fade-animation
{
var element = document.getElementById(eid);
if(element == null)
return;
if(element.FadeState == null)
{
if(element.style.opacity == null
|| element.style.opacity == ''
|| element.style.opacity == '1')
{
element.FadeState = 2;
}
else
{
element.FadeState = -2;
}
}
if(element.FadeState == 1 || element.FadeState == -1)
{
element.FadeState = element.FadeState == 1 ? -1 : 1;
element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
}
else
{
element.FadeState = element.FadeState == 2 ? -1 : 1;
element.FadeTimeLeft = TimeToFade;
setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
}
}
function animateFade(lastTick, eid) //function from http://www.switchonthecode.com/tutorials/javascript-tutorial-simple-fade-animation
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var element = document.getElementById(eid);
if(element.FadeTimeLeft <= elapsedTicks)
{
element.style.opacity = element.FadeState == 1 ? '1' : '0';
element.style.filter = 'alpha(opacity = '
+ (element.FadeState == 1 ? '100' : '0') + ')';
element.FadeState = element.FadeState == 1 ? 2 : -2;
return;
}
element.FadeTimeLeft -= elapsedTicks;
var newOpVal = element.FadeTimeLeft/TimeToFade;
if(element.FadeState == 1)
newOpVal = 1 - newOpVal;
element.style.opacity = newOpVal;
element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}
