Flex 兑现图片的切换
Flex 实现图片的切换
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.collections.ArrayCollection; [Bindable] private var _arrayCollection:ArrayCollection = new ArrayCollection(["../img/images3.jpg", "../img/460.jpg", "../img/imagesCAV1ZQPW.jpg", "../img/images52.jpg", "../img/64d92fc7jw1dj9wsnjlmij.jpg", "../img/http_imgload.jpg", "../img/imagesCAA9E8GD.jpg", "../img/imagesCATSNEV1.jpg", "../img/imagesCAUFLAPQ.jpg" ]); private var tim:Timer = new Timer(3000); private var j:int = 0; private function init():void{ if(_arrayCollection.length != 0){ showImage.source = _arrayCollection.getItemAt(0); everySecondCheckImage(); } } private function clickImage(e:Event):void{ tim.stop(); showImage.source = e.currentTarget.getRepeaterItem(); j = getImageIndexOf(e.currentTarget.getRepeaterItem()); hboxLength.horizontalScrollPosition = 120 * j; tim.start(); } //每三秒切换一次 private function everySecondCheckImage():void{ tim.addEventListener(TimerEvent.TIMER,function(e:TimerEvent):void{ j = j + 1; hboxLength.horizontalScrollPosition = 120 * j; if(j > _arrayCollection.length - 1){ j = 0; hboxLength.horizontalScrollPosition = 0; } showImage.source = _arrayCollection.getItemAt(j); }); tim.start(); } //返回当前图片的索引 private function getImageIndexOf(obj:Object):int{ return _arrayCollection.getItemIndex(obj); } ]]> </mx:Script> <mx:VBox x="270" y="10" width="611" borderStyle="solid" borderThickness="1" height="530"> <mx:VBox borderStyle="solid" borderThickness="1" paddingTop="2" paddingRight="2" paddingBottom="2" paddingLeft="2" width="607" height="397"> <mx:Image id="showImage" width="600" height="391" x="211" y="173" maintainAspectRatio="false"/> </mx:VBox> <mx:HBox width="606" height="125" id="hboxLength"> <mx:Repeater dataProvider="{_arrayCollection}" id="repArray"> <mx:VBox buttonMode="true" borderThickness="1" borderStyle="solid" paddingTop="2" paddingRight="2" paddingBottom="2" paddingLeft="2"> <mx:Image source="{repArray.currentItem}" width="109" height="100" maintainAspectRatio="false" click="clickImage(event)"/> </mx:VBox> </mx:Repeater> </mx:HBox> </mx:VBox> </mx:Application>