Yahoo!Widgetsで画像入れ替え

今回はサーバから取得する画像を複数にして、勝手にどんどん
入れ替えて表示させてみる。

<timer>である<interval>毎にあるスクリプトを実行
するって事が出来るみたい。つうわけで、３秒ごとに<image>
の中の<src>を入れ替えるって風に記述。

それに必要な変数等は<action>にて記述した。

ソース一部抜粋

<image> <name>myImage</name> <src>http://192.168.0.2/image/3.jpg</src> <visible>true</visible> </image>

...省略...

<timer> <name>timer</name> <!-- interval で指定された秒毎に以下のスクリプトが実行される --> <interval>3</interval> <ticking>true</ticking> <onTimerFired> <![CDATA[ if(timerCount == 0){ myImage.src = "http://192.168.0.2/image/3.jpg"; timerCount++; }else{ myImage.src = "http://192.168.0.2/image/4.jpg"; timerCount = 0; } ]]> </onTimerFired> </timer>

画像は前回と同じだけど、一応＾＾




ふむふむ。とりあえず、うまく動いた♪
実際には上の花火の写真が交代でもう一枚と入れ替わります＾＾ｂ

ちなみに、表示される画像はネット上の好きな画像のURLを
記述しても表示可能。。。当たり前か。
次は、もちっとアニメーションとかつけていきたいなぁ。

以下、ソース

<?xml version="1.0" encoding="UTF-8"?> <!-- 表示画像を３秒毎に入れ替え --> <widget> <debug>on</debug> <window> <name>main_window</name> <title>Photo Viewer</title> <height>400</height> <width>400</width> <visible>true</visible> <image> <name>myImage</name> <src>http://192.168.0.2/image/3.jpg</src> <visible>true</visible> </image> </window> <!-- onLoad でグローバル変数を初期化する --> <action trigger="onLoad"> var timerCount = 0; </action> <timer> <name>timer</name> <!-- interval で指定された秒毎に以下のスクリプトが実行される --> <interval>3</interval> <ticking>true</ticking> <onTimerFired> <![CDATA[ if(timerCount == 0){ myImage.src = "http://192.168.0.2/image/3.jpg"; timerCount++; }else{ myImage.src = "http://192.168.0.2/image/4.jpg"; timerCount = 0; } ]]> </onTimerFired> </timer> </widget>