|
现在你已经理解了图象数组的概念。现在我们谈谈在代码中我们需要实现什么目的。由于标准的HTML就可以引入相应的图象。所以在JavaScript中我们只需让图象轮流显示从而形成动画效果。
在JavaScript编码中我们将各幅图象轮流显示的过程做成一个自动进行的程序。以下是相应的编码：
// change the image
document.images['daImg'].src = bendyList[daPosition];
该编码告诉浏览器根据变量daPosition的值确定daImg。
daPosition指向图象数组bendyList中相应的图象.
daPosition的初始值设置为0，所以如果将初始值插入编码中，则
由于bendyList[0]指向图象bendy000.gif ，所以上面的代码等于
所以代码指向数组中的第1幅图象。接下来我们将生成一个函数自动循环指向数组中的其它图象。
该函数使用一个"if else"语句将图象位置从初始图象轮流指向其它的图象，从而生成动画效果。
function imageFlip() {
// increment the pointer
if(daPosition == bendyList.length-1) {
daPosition = 0; } else { daPosition++; }
在代码中，只要daPosition的值小于14（因为bendylist的长度是1畚，而if循环中设定daPosition等于bendylist.lenth-1,即15－1＝14时，daPosition的值就要被还原到0，在daPosition小于14时，daPosition值将自动加1，然后进入下一个循环。随着daPosition的值增加1，则其指向的图象数组中的图象编号也增加1。当daPosition等于14时，它的值被返回到0，则它又指向第一个数组图象bendylist(0)。
在载入网页时，网页主体中的onload="imgFlip()" 调用
imgFlip() ，从而实现动画效果。如果你想使动画重复播放两遍或3遍，你需要再次调用该函数。此处我们用setTimeout实现重复调用imageFlip()。有关setTimeout的知识请参考该教程。
// do it again
setTimeout('imageFlip()', 200);
一旦过去200毫秒时间，imageFlip()函数就被再次调用。
现在动画即可循环播放了。
|
