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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值