如何用JavaScript实现旋转木马

sunhw0725 · 发表于 2007-10-10 17:53:48

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() no-repeat;

}

#story2 {

background:url() no-repeat;

}

#story3 {

background:url() no-repeat;

}

#story4 {

background:url() 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>

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吧。

记住用合适的工具完成合适的任务。

		自动登录	找回密码
密码			注册

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询

如何用JavaScript实现旋转木马

相关帖子