现在位置：<span class="storydesc">
Learn how the .NET Framework works and the tools you'll need to get up and running in this quick start guide.</span>
<span class="fstory"><a href="http://www.builderau.com.au/program/dotnet/soa/Quick_Start_guide_to_Microsoft_NET_development/0,339028399,339271495,00.htm">Full story</a></span>
</div>
<div id="story4" class="storydiv">
<a href="http://www.builderau.com.au/program/css/soa/Understanding_the_CSS_box_model/0,39028392,39269220,00.htm" class="ched">Understand CSS</a>
<span class="storydesc">
Before diving into CSS learn<br/>some of the core drivers and concepts.</span>
<span class="fstory"><a href="http://www.builderau.com.au/program/css/soa/Understanding_the_CSS_box_model/0,39028392,39269220,00.htm">Full story</a></span>
</div>
</div>
</body>
</html>
这好极了，但是它们是一个接一个垂直排列的，那么它们很难旋转起来。要让所有的div互相叠在一起，我们就要往storydiv类里加入下面一行代码：
position:absolute;
现在我们有了一堆乱糟糟的玩意。要让它变得井然有序，我们就要用下面一句把带有id story 2到4的div隐藏起来：
display:none
这就是加载的时候我们的旋转木马的样子——现在是讨论JavaScript的时候了。
引入JavaScript
旋转木马至关重要的特性是内容的旋转，因此我们要使用一些常见的CSS技巧来隐藏和显示div。我们将用到下面的代码：
<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:
<bodyonload="autorot()">
对于body标记，我们使用：
<bodyonload="autorot()">
这里发生的情况是当页面加载的时候，autorot函数被调用，从而进一步调用showNext函数，然后设置一个超时，在3.5秒之后重新调用自己——这个超时用来保证旋转木马反复旋转。
showNext 方法会确定哪一个story被显示出来，并把它传递给rotateDiv函数，所有的操作都在这里发生。RotateDiv会取回所有 storyContainer div的子div，并把它们的style.display变量设置为无，除非它是我们希望看到的story，在这种情况下，它被设置为block。
现在我们有了一个可以使用的旋转木马——但是从可用性的角度上讲还不够理想。就让我们做点改动吧。
导航
旋转木马提供了一种显示内容多个不同部分的快速方法，但这常常也要在旋转速度和能够真正阅读内容之间作出权衡。
我们准备加入一个用于导航链接的div，这能够带我们跳到这四个story中的任何一个，并给予我们利用story向前和向后链接来控制旋转木马显示的能力。
下面就是在关闭body标记之前我们插入的导航HTML：
<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>
