Flash动画可以让Web网站看起来很漂亮，但是由于各种原因不是每个人都会在自己的客户端浏览器上安装Flash播放器。如果你或者你的用户不幸安装了64位的Linux发行版，或者你痛恨在自己的Web页面上放动画，那么你就不得不面对没有Flash动画的情况了。
在本文里，我将告诉你如何用Javascript实现一个可用性更高的旋转木马（carousel）而弃用Flash。
Javascript——两害相交取其轻
在本文里，我不准备去争论为什么要开发一个旋转木马，而是要接受我们不得不去开发的事实。
那么问题就来了：为什么要使用JavaSript而不是Flash？
HTML基础
知道了这些原因，就让我们从将要在本文中用到的四个内容开始创建旋转木马吧。
<html>
<body>
<div id="storyContainer">
<div id="story1">
<a href="http://www.builderau.com.au/program/iis/soa/Protect_IIS_log_files_by_moving_them_to_a_secure_location/0,339028427,339271617,00.htm" class="ched">Secure IIS</a>
Log files are essential to reconstruct events before an IIS Web server failure. Learn how to protect your log files with this tip.
<span class="fstory"><a href="http://www.cnet.com.au/software/security/0,39029558,40058242,00.htm">Full story</a></span>
</div>
<div id="story2">
<a href="http://www.builderau.com.au/program/html/soa/Microformats_and_Mapping/0,339028420,339271486,00.htm" class="ched">User Group Mash</a>
Find an Aussie user group near you with our new Google maps interface.
<span class="fstory"><a href="http://www.builderau.com.au/program/html/soa/Microformats_and_Mapping/0,339028420,339271486,00.htm">Full story</a></span>
</div>
<div id="story3">
<a href="http://www.builderau.com.au/program/dotnet/soa/Quick_Start_guide_to_Microsoft_NET_development/0,339028399,339271495,00.htm" class="ched">.NET 101</a>
Learn how the .NET Framework works and the tools you'll need to get up and running in this quick start guide.
<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" >
<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>
Before diving into CSS learn some of the core drivers and concepts.
<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加入一些样式，让它看起来更像我们所知道的旋转木马：
<html>
<head>
<style>
.storydiv {
height:182px;
width:355px;
padding-left:175px;
top:0px;
left:0px;
}
#story1 {
background:url(http://www.builderau.com.au/i/s/cov/securitychain170110.gif) no-repeat;
}
#story2 {
background:url(http://www.builderau.com.au/i/s/cov/browser170110.jpg) no-repeat;
}
#story3 {
background:url(http://www.builderau.com.au/i/s/cov/dotnet170110.gif) no-repeat;
}
#story4 {
background:url(http://www.builderau.com.au/i/s/cov/tools170110.jpg) no-repeat;
}
.storyDesc{
padding-top: 10px;
padding-right: 8px;
display:block;
}
.fStory {
padding-top: 10px;
display:block;
font-weight:bold;
}
</style>
</head>
<body>
<div id="storyContainer">
<div id="story1" class="storydiv">
<a href="http://www.builderau.com.au/program/iis/soa/Protect_IIS_log_files_by_moving_them_to_a_secure_location/0,339028427,339271617,00.htm" class="ched">Secure IIS</a>
<span class="storydesc">
Log files are essential to reconstruct events before an IIS Web server failure. Learn how to protect your log files with this tip.</span>
<span class="fstory"><a href="http://www.cnet.com.au/software/security/0,39029558,40058242,00.htm">Full story</a></span>
</div>
<div id="story2" class="storydiv">
<a href="http://www.builderau.com.au/program/html/soa/Microformats_and_Mapping/0,339028420,339271486,00.htm" class="ched">User Group Mash</a>
<span class="storydesc">
Find an Aussie user group near you with our new Google maps interface.</span>
<span class="fstory"><a href="http://www.builderau.com.au/program/html/soa/Microformats_and_Mapping/0,339028420,339271486,00.htm">Full story</a></span>
</div>
<div id="story3" class="storydiv">
<a href="http://www.builderau.com.au/program/dotnet/soa/Quick_Start_guide_to_Microsoft_NET_development/0,339028399,339271495,00.htm" class="ched">.NET 101</a>
<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类里加入下面一行代码：
