flex 點擊按鈕圖片切換

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3. <mx:Script>
4.     <![CDATA[
5.         import mx.controls.*;
6.             private var num:int;
7.             private function pic(direction:String):void{
8.                 if(direction == 'next'){
9.                     this.num++;
10.                     if (this.num >= xmlPic.pic.length()){this.num = xmlPic.length()-1;}
11.                 }
12.                 if(direction == 'prev'){
13.                     this.num--;
14.                     if(this.num < 0){this.num = 0;}
15.                 }       
16.                 myimg.load(xmlPic.pic[num].@path);//這一句也可這樣寫 myimg.load((xmlPic.children())[num].@path);
17.             }
18.     ]]>
19. </mx:Script>
20. <mx:XML id="xmlPic" source="data/pic.xml" />
21. <mx:Panel horizontalCenter="0" width="400" height="300">
22.         <mx:Canvas horizontalCenter="0" width="100%" height="100%">
23.         <mx:VBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">            
24.             <mx:Image id="myimg" width="158" height="120" source="{xmlPic.pic[0].@path}"/>  
25.             <mx:HBox>
26.                 <mx:Button id="prev" label="上一張" click="pic('prev')"/>      
27.                 <mx:Button id="next" label="下一張" click="pic('next')"/>
28.             </mx:HBox>          
29.         </mx:VBox>          
30.         </mx:Canvas>        
31.     </mx:Panel>     
32. </mx:Application>

 

xml文件pic.xml

1. <?xml version="1.0" encoding="utf-8"?> 
2. <pics>
3.     <pic name="圖1" path="assets/small/1.jpg"/>
4.     <pic name="圖2" path="assets/small/2.jpg"/>
5.     <pic name="圖3" path="assets/small/3.jpg"/>
6.     <pic name="圖4" path="assets/small/4.jpg"/>
7.     <pic name="圖5" path="assets/small/5.jpg"/>
8.     <pic name="圖6" path="assets/small/6.jpg"/>
9.     <pic name="圖7" path="assets/small/7.jpg"/>
10.     <pic name="圖8" path="assets/small/8.jpg"/>
11. </pics>