有谁做过用flex显示图片的幻灯片效果
如题有做过的能否共享下代码学习下。高分求。
[解决办法]
这是我写的
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()"> <mx:Script> <![CDATA[ import mx.controls.Button; import mx.collections.ArrayCollection; import mx.core.UIComponent; [Bindable] private var picArray:ArrayCollection; [Bindable] private var index:Number = 0; private function init():void { var loader:URLLoader = new URLLoader(); loader.addEventListener(Event.COMPLETE,onComplete); loader.load(new URLRequest("pic.xml")); var timer:Timer = new Timer(6000); timer.start(); timer.addEventListener(TimerEvent.TIMER,onTimerHandler); } private function onTimerHandler(event:TimerEvent):void { trace("on timer"); if(this.index == picArray.length - 1) { this.index = 0; } else { this.index++; } } private function onComplete(event:Event):void { var xml:XML = new XML(event.target.data); picArray = new ArrayCollection(); for(var i:Number = 0;i <xml.children().length();i++) { var o:Object = new Object(); o.ImageUrl = xml.pic[i].imageUrl; picArray.addItem(o); var btn:Button = new Button(); btn.label = String(i + 1); btn.id = "btn" +String(i+1); btn.addEventListener(MouseEvent.CLICK,onClickHandlerTwo); pnl.addChild(btn); } } private function onClickHandler(i:String):void { this.index = int(i)-1;// switch(id)// {// case "btn1":// this.index = 0;// break;// case "btn2":// if(this.index != 0)// {// this.index -= 1;// }// else if(this.index == 0)// {// this.index = picArray.length-1;// }// break;// case "btn3":// if(this.index != picArray.length-1)// {// this.index += 1;// }// else if(this.index == picArray.length-1)// {// this.index = 0;// }// break;// case "btn4":// this.index = picArray.length - 1;// break;// } } private function onClickHandlerTwo(event:MouseEvent):void { onClickHandler(event.target.label); } private function onImageClick(event:MouseEvent):void { if(this.index == picArray.length -1) { this.index = 0; } else { this.index++; } } ]]> </mx:Script> <mx:Canvas y="0" styleName="imageHolder" horizontalCenter="0" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="{picArray.getItemAt(index).Width}" height="455"> <mx:Image x="0" y="0" height="455" id="imageShow" completeEffect="{fadeIn}" source="{picArray.getItemAt(index).ImageUrl}" width="{picArray.getItemAt(index).Width}" click="onImageClick(event)"/> </mx:Canvas> <mx:HBox id="pnl" x="100" y="463"/> <mx:Label x="607" y="466" width="73" id="indexCount" color="#FF0030" fontWeight="bold" text="{(index+1) + '/' + picArray.length}"/> <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.18" alphaTo="1.0"/></mx:Application> <?xml version="1.0" encoding="utf-8"?><slides> <pic> <imageUrl>assets/1.jpg</imageUrl> </pic> <pic> <imageUrl>assets/2.jpg</imageUrl> </pic> <pic> <imageUrl>assets/3.jpg</imageUrl> </pic> <pic> <imageUrl>assets/4.jpg</imageUrl> </pic> <pic> <imageUrl>assets/5.jpg</imageUrl> </pic></slides>
[解决办法]
楼上的代码是可以的
应用Timer组件控制显示，应用effect组件控制切换效果,再循环显示
[解决办法]
好複習。