如何用JavaScript实现旋转木马

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>

正如看到的，我们将需要一些更多的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;
共5页: 上一页 [1] [2] [3] 4 [5] 下一页

评论加载中…