您当前的位置: 首页 » JavaScript/JQuery编程 » 如何用JavaScript实现旋转木马
如何用JavaScript实现旋转木马
论坛链接
Flash动画可以让Web网站看起来很漂亮，但是由于各种原因不是每个人都会在自己的客户端浏览器上安装Flash播放器。如果你或者你的用户不幸安装了64位的Linux发行版，或者你痛恨在自己的Web页面上放动画，那么你就不得不面对没有Flash动画的情况了。
在本文里，我将告诉你如何用JavaScript实现一个可用性更高的旋转木马（carousel）而弃用Flash。
JavaScript——两害相交取其轻
在本文里，我不准备去争论为什么要开发一个旋转木马，而是要接受我们不得不去开发的事实。
那么问题就来了：为什么要使用JavaSript而不是Flash？
它要比Flash的实现更加轻巧——通过优化代码，我们只需要几千字节就能够获得一个可以使用的旋转木马，加载图片所需要的时间要比HTML和JavaScript的长。
可维护性是另外一个原因。很多开发人员都知道JavaScript在可维护性上要胜Flash一筹。也许你没有（足够的）设计资源来创建一个功能完整的Flash实现，所以如果将它突然留给开发人员，这就意味着JavaScript是一个可行的替代方案。
降级。在禁用JavaScript的情况下将有用的内容发送给用户要比在禁用Flash的情况下容易得多。
可访问性。用屏幕阅读器浏览旋转木马要比浏览Flash对象更容易。
Google。如果你的内容是在页面中的，Google就能够搜索到它；如果它在Flash中，而且页面中没有隐藏旋转木马的话，那么Googlebot就无法找到链接。
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(
}
#story2 {
background:url(
}
#story3 {
background:url(
}
#story4 {
background:url(
}
.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>
在本文里，我将告诉你如何用JavaScript实现一个可用性更高的旋转木马（carousel）而弃用Flash。
JavaScript——两害相交取其轻
在本文里，我不准备去争论为什么要开发一个旋转木马，而是要接受我们不得不去开发的事实。
那么问题就来了：为什么要使用JavaSript而不是Flash？
它要比Flash的实现更加轻巧——通过优化代码，我们只需要几千字节就能够获得一个可以使用的旋转木马，加载图片所需要的时间要比HTML和JavaScript的长。
可维护性是另外一个原因。很多开发人员都知道JavaScript在可维护性上要胜Flash一筹。也许你没有（足够的）设计资源来创建一个功能完整的Flash实现，所以如果将它突然留给开发人员，这就意味着JavaScript是一个可行的替代方案。
降级。在禁用JavaScript的情况下将有用的内容发送给用户要比在禁用Flash的情况下容易得多。
可访问性。用屏幕阅读器浏览旋转木马要比浏览Flash对象更容易。
Google。如果你的内容是在页面中的，Google就能够搜索到它；如果它在Flash中，而且页面中没有隐藏旋转木马的话，那么Googlebot就无法找到链接。
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(
}
#story2 {
background:url(
}
#story3 {
background:url(
}
#story4 {
background:url(
}
.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>
#2楼发布者：sunhw0725时间：2007-10-10 17:54:10
这好极了，但是它们是一个接一个垂直排列的，那么它们很难旋转起来。要让所有的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;
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>
正如看到的，我们将需要一些更多的JavaScript函数，就是下面这几个：
function showNext(){if(stor < maxstor)stor++;elsestor=0; rotateDiv(stor);} function stoprot() function showNext(){if(stor < maxstor)stor++;elsestor=0; rotateDiv(stor);} function showPrev(){if(stor > 0)stor--;elsestor=maxstor; rotateDiv(stor);} function showStoryOne()function showStoryTwo()function showStoryThree()function showStoryFour(){stor=3;
没有什么很特别的，只有所需要的。我还需要更改rotateDiv函数，以更新正在显示哪一个story，下面就是要用的代码：
function rotateDiv(stor){var divs = document.getElementById("storyContainer").getElementsByTagName("div");for (var i=0; i < divs.length; i++ ) {var div = divs;if ( (div.id != "")) {if(i != stor){div.style.display = "none";}else{div.style.display = "block";}}}var spans = document.getElementById("nav").getElementsByTagName("span");for (var i=0; i < spans.length; i++ ) {var span = spans;if ( (span.id != "")) {if(i != stor)span.className = "none";elsespan.className = "selStory";}}}
由于有一些新的样式，我们需要把它们添加到样式表里：
#nav { font-size:12px;position:absolute;top:100px;left:325px;} .selStory {background:#eee;border:1px solid #777;}
完成了，我们功能完备的旋转木马已经完成了，在这里可以查看完整的代码。
加入效果——让它看起来真的很酷
有了这个原型我们就可以真正地加入效果了，这样至少我们能够看到与在Flash里一样的效果。
再经过一些有创意的工作，我确信你创造的旋转木马一定会比我在仓促之间创造的要好。
什么时候不用JavaScript
知道什么时候使用JavaScript还不够，要取得最好的结果，你还需要知道什么时候不用JavaScript。你希望获得的效果越高级，使用JavaScript的优势就越少。
在最新和最眩目的效果上，JavaScript是绝对不是Flash的对手，Flash在获得相同效果所需要的时间上是其他产品无法比拟的。
如果你需要使用视频，那么flv是用于Web的最佳格式。这就是为什么YouTube和Google Video都使用Flash播放器的原因。
一旦你开始越来越多地使用JavaScript，浏览器之间的差异就会显得越明显。解决这一问题的一个重要途径是将平台标准化，这也就是Flash所适应的标准化平台。
结论
做到这一步需要花上一点功夫，也需要多喝几杯咖啡，但是可以结束了。
要记住的一件事是，如果你最终决定把Flash替换掉，那么你就和想要使用Flash的人差不多了。
如果你所需要的只不过是简单的旋转效果，那么JavaScript可能就是你的不二选择，如果你需要高级的动画以及各种视觉效果，那么还是使用Flash吧。
记住用合适的工具完成合适的任务。
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;
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>
正如看到的，我们将需要一些更多的JavaScript函数，就是下面这几个：
function showNext(){if(stor < maxstor)stor++;elsestor=0; rotateDiv(stor);} function stoprot() function showNext(){if(stor < maxstor)stor++;elsestor=0; rotateDiv(stor);} function showPrev(){if(stor > 0)stor--;elsestor=maxstor; rotateDiv(stor);} function showStoryOne()function showStoryTwo()function showStoryThree()function showStoryFour(){stor=3;
没有什么很特别的，只有所需要的。我还需要更改rotateDiv函数，以更新正在显示哪一个story，下面就是要用的代码：
function rotateDiv(stor){var divs = document.getElementById("storyContainer").getElementsByTagName("div");for (var i=0; i < divs.length; i++ ) {var div = divs;if ( (div.id != "")) {if(i != stor){div.style.display = "none";}else{div.style.display = "block";}}}var spans = document.getElementById("nav").getElementsByTagName("span");for (var i=0; i < spans.length; i++ ) {var span = spans;if ( (span.id != "")) {if(i != stor)span.className = "none";elsespan.className = "selStory";}}}
由于有一些新的样式，我们需要把它们添加到样式表里：
#nav { font-size:12px;position:absolute;top:100px;left:325px;} .selStory {background:#eee;border:1px solid #777;}
完成了，我们功能完备的旋转木马已经完成了，在这里可以查看完整的代码。
加入效果——让它看起来真的很酷
有了这个原型我们就可以真正地加入效果了，这样至少我们能够看到与在Flash里一样的效果。
再经过一些有创意的工作，我确信你创造的旋转木马一定会比我在仓促之间创造的要好。
什么时候不用JavaScript
知道什么时候使用JavaScript还不够，要取得最好的结果，你还需要知道什么时候不用JavaScript。你希望获得的效果越高级，使用JavaScript的优势就越少。
在最新和最眩目的效果上，JavaScript是绝对不是Flash的对手，Flash在获得相同效果所需要的时间上是其他产品无法比拟的。
如果你需要使用视频，那么flv是用于Web的最佳格式。这就是为什么YouTube和Google Video都使用Flash播放器的原因。
一旦你开始越来越多地使用JavaScript，浏览器之间的差异就会显得越明显。解决这一问题的一个重要途径是将平台标准化，这也就是Flash所适应的标准化平台。
结论
做到这一步需要花上一点功夫，也需要多喝几杯咖啡，但是可以结束了。
要记住的一件事是，如果你最终决定把Flash替换掉，那么你就和想要使用Flash的人差不多了。
如果你所需要的只不过是简单的旋转效果，那么JavaScript可能就是你的不二选择，如果你需要高级的动画以及各种视觉效果，那么还是使用Flash吧。
记住用合适的工具完成合适的任务。