flex4实现图片的动态切换

用flex4实现图片的动态切换，动态创建linkbutton按钮，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               creationComplete="init()">
   
   
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.controls.LinkButton;
            import mx.utils.*;
           
            import org.osmf.events.TimeEvent;
           
            /**
               *定义多少时间循环一次
            */
            private var timeNum:int = 2000;
            /**
             * 定义所要显示的图片数量
            */
            [Bindable]
            private var picNum:int = 5;
            /**
             *定义控制图片滚动的下标
             */
            private var index:int = picNum;
            private function init():void
            {
                //加载linkbutton样式
                styleManager.loadStyleDeclarations("ef.swf");
                //动态添加linkbutton以及间隔线
                for (var i:int=1;i <= picNum;i++)
                {
                    //添加间隔线
                    var vr:VRule = new VRule();
                    vr.x = 495 - 21 * i;
                    vr.y = 357;
                    vr.height = 15;
                    ca.addElement(vr);
                   
                    //添加linkbutton
                     var lb:LinkButton = new LinkButton();
                    lb.id = ("lkb"+ i).toString();
                    lb.x = 475 - 21 * (i - 1);
                    lb.y = 352;
                    lb.height = 20;
                    lb.width = 20;
                    lb.label = i.toString();
                    //初始化样式信息
                    if (i == picNum){
                        lb.styleName = "pic";
                        lb.alpha = 1;
                    }
                    else{
                        lb.alpha = 0.5;
                    }
                    //添加点击事件监听
                    lb.addEventListener(MouseEvent.CLICK,getlkb);
                    ca.addElement(lb);
                }
                //一段时间自动调用方法
                setInterval(autoPic,timeNum);
            }
           
            //获取被鼠标点击的linkbutton
            private function getlkb(event:MouseEvent):void
            {
                if (event.target is LinkButton)
                {
                    index = int((event.target as LinkButton).label);
                }
                getPic(index);
            }
           
            //图片自动切换
            private function autoPic():void
            {
                if (index < 1)
                {
                    index = picNum;
                }
                getPic(index);
            }
           
            //改变图片切换时linkbutton样式
            private function changePic(x:int):void
            {
                //遍历容器，得到所有linkbutton
                for each(var pic:Object in ca.getChildren())
                {
                    if (pic is LinkButton)
                    {
                        //重置其它linkbutton样式
                        if (pic.id!="lkb"+x.toString())
                        {
                            pic.alpha = 0.1;
                            pic.styleName = "";
                        }
                        //改变当前linkbutton的样式
                        else
                        {
                            pic.alpha = 1;
                            pic.styleName = "pic";
                        }
                    }   
                }
            }
           
            //绑定相应图片到image中
            private function getPic(evt:int):void
            {
                this.image.source = "pictur/"+evt+".jpeg";
                changePic(evt);
                index --;
            }
           
           
        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <mx:Canvas id="ca" width="600" height="500">
    <mx:Image id="image" width="500" height="400" source="pictur/{picNum}.jpeg" buttonMode="true" useHandCursor="true"/>
    <mx:VRule x="495" y="357" height="15"/>
    </mx:Canvas>
</s:Application>