如何用JavaScript实现旋转木马

</div>

<div id="story2" class="storydiv">

<a href="http://www.builderau.com.au/program/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/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类里加入下面一行代码：

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() {
共5页: 上一页 [1] [2] 3 [4] [5] 下一页

评论加载中…