Bringing in the JavaScript
The defining feature of a carousel is the rotating content, therefore we will be using some cheap CSS tricks to simply hide and show the divs. We will be using the following code:
<script>
var stor = -1;
var maxstor = 3;
var timeout = 3500;
function autorot() {
showNext();
timeout = setTimeout('autorot();', timeout);
}
function rotateDiv(stor){
var divs = document.getElementById("storyContainer").getElementsByTagName("div");
for (var i=0; i < divs.length; i++ ) {
var div = divs[i];
if ( (div.id != "")) {
if(i != stor){
div.style.display = "none";
}
else{
div.style.display = "block";
}
}
}
}
function showNext(){
if(stor < maxstor)
stor++;
else
stor=0;
rotateDiv(stor);
}
</script>
and on the body tag we put:
<body onload="autorot()">
What is happening here is that when the page laods the autorot function is called, which in turn calls the showNext function and then sets up a timeout that recalls itself in 3.5 seconds - this timeout is what keeps the carousel turning over.
The showNext method simply determines which story is going to be shown and passes it to the rotateDiv function, where all the action happens. rotateDiv fetches all the divs that are children of the storyContainer div and sets their style.display variable to none unless it is the story we wish to see, in which case it is set to block.
Now we have a functional carousel - yet it is hardly a thing of beauty or usability. Let's change that.
Navigation
Carousel's provide a quick way to show many different pieces of content, a tradeoff is usually made between rotation speed and the ability to actually read the content beyond the headline. Enter the need for navigation links.
We are going to add a div for the navigation links that will be able to jump us to any of the four stories and also give us the ability to control the carousel's display with previous and next story links.
Here is our navigation HTML that we insert before the closed body tag:
<div id="nav"><a href="javascript:showPrev()" onClick="stoprot()"><< Prev</a> | <span id="nav1"><a href="javascript:showStoryOne()" onClick="stoprot()">1</a></span> | <span id="nav2"><a href="javascript:showStoryTwo()" onClick="stoprot()">2</a></span> | <span id="nav3"><a href="javascript:showStoryThree()" onClick="stoprot()">3</a></span> | <span id="nav4"><a href="javascript:showStoryFour()" onClick="stoprot()">4</a></span> | <a href="javascript:showNext()" onClick="stoprot()">Next >></a></div>As can be seen, we are going to need some more JavaScript functions, here they are:
function showNext(){
if(stor < maxstor)
stor++;
else
stor=0;
rotateDiv(stor);
}
function stoprot() {
clearTimeout(timeout);
}
function showNext(){
if(stor < maxstor)
stor++;
else
stor=0;
rotateDiv(stor);
}
function showPrev(){
if(stor > 0)
stor--;
else
stor=maxstor;
rotateDiv(stor);
}
function showStoryOne(){
stor=0;
rotateDiv(stor);
}
function showStoryTwo(){
stor=1;
rotateDiv(stor);
}
function showStoryThree(){
stor=2;
rotateDiv(stor);
}
function showStoryFour(){
stor=3;
rotateDiv(stor);
}
Do you need help with JavaScript? 
1
Managerial Excellence - 19/10/06
Indeed Flash is often wasted on many users. Some bloody IT admins lock down desktops so much you can't even install the thing!
» Report offensive content
2
Brice - 19/10/06
That is good to see that developpers want to do the same as designers but it will never look as sharp and clean as flash (or a designer job).
Talking about the speed, I agree that your Javascript will load quicker but i prefer my 5kb flash animation against your 100kb Javascript librairies (Prototype and Scriptcalous).
And about google, if you care about your SEO you just have to overwrite your content with the flash object using Javascript. And I think this is the only place Javascript should be used in that, to serve Flash.
» Report offensive content
3
dobie - 19/10/06
Compared to the MEGABYTES we are talking about to download the latest and greatest in flash.
http://labs.adobe.com/downloads/flashplayer9.html
If a site was already using the Scriptaculous libraries then you essentially get it for free anyway.
If you are worried about file size then you could use something like the first example (http://www.builderau.com.au/resources/carousel/example1.htm) and use CSS and imagery to make it better.
> I think this is the only place Javascript should be used in that, to serve Flash
AJAX just called, it wants all the pages it has served to you back.
» Report offensive content
4
Brice - 19/10/06
You will download the Javascript librairies each time you reach a new domain, no matter what, and yes your javascript will be cached like my flash animation.
At least most of flash designers are also developpers, can't say the same thing about developpers who want to be designers :)
» Report offensive content
5
dobie - 19/10/06
If you trimmed the animations down properly in the javascript you can still remain smaller than flash.
You can do your own dissolve effect in a few lines, easy as and it will be heaps smaller then the Flash.
But like the author said, if you need advanced animation and all sorts of visual trickery then Flash would be your thing.
Javascript has it's limits. And so do you apparently.
» Report offensive content
6
Brice - 19/10/06
and don't try to get deeper than you are.
» Report offensive content
7
cankles - 20/10/06
Now, now, children -- both of you drink your Kool Aid.
-- Jim Jones
» Report offensive content
8
context menu wanted - 20/10/06
Flash guys are just threatened that you can do in javascript what you can do in flash. But fuc*ing A, flash guys, how can you expect us to not look for alternatives when we are surfing in firefox and can't use the context menu + open in new tab! Just ridiculous...
» Report offensive content
9
Matt Emery - 27/10/06
I am calling LAME on this article, no qualification, just someone's opinion. And as you can see by the comment thread, everyone's got one.
» Report offensive content
10
Ben - 30/10/06
I have been touting JavaScript as an alternative to Flash for *years*. To me it is simply unacceptible to have *any* content in a flash animation. Flash is great for things like www.stickcricket.com, which would be incredibly difficult to write and tune correctly in JavaScript. But people use Flash for navigation within sites - HELLO not everyone has Flash! Flash imo is WAAAAAY over-used and over-rated.
» Report offensive content
11
Baba - 22/02/07
that was very good
» Report offensive content
12
Axiom - 17/04/07
This works great in Firefox, but in IE6, and IE7 in your second sample, the stories rotate by once, and then it shows blank.
Didn't notice until I was through :(
» Report offensive content
13
skolbe - 07/05/07
this is set to run indefinitely---how would you control the number of loops?
thanks.
» Report offensive content
14
CD - 12/06/07
Thank you so much. I have been searching for this for a while. This is great!
» Report offensive content
15
Adam - 07/04/08
In IE 7, the stories only scroll once. They show up blank after that. Works in Firefox but how can I fix the ie problem?
» Report offensive content
16
Jhon - 28/04/08
Hay que conservar los valores de opacidad del div anterior o el ultimo mostrado. No funcionaba en IE6+ pero haciendo esto funciona sin problemas.
» Report offensive content
17
zipi - 20/04/09
I have the same bug on IE6, IE7 : the story only scroll once and show up blank after.
Jhon, please could you explain de "opacidad del div anterior" solution ?
» Report offensive content
18
sat - 23/05/09
I love this method...the player will now work on my mobile, as apposed to my Flash version. Quick question...how can I make it not autoplay initially.
» Report offensive content
19
sat - 23/05/09
Forget it, I am such an @#$. I so overlooked how it was calling in on the "onload."
» Report offensive content
20
sat - 23/05/09
anyone figure out the IE problem?
» Report offensive content
21
kaliraj - 22/09/09
I want to more coding and javascript to my mail
» Report offensive content