flex 图片相册

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" themeColor="#0F0101" backgroundColor="#0F0101" creationComplete="onInit()"
paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">


<mx:HBox verticalAlign="middle" mouseOver="mouseOverHandler(event)" mouseOut="mouseOutHandler(event)">
<mx:Button id="btnLeft" label="&lt;&lt;" visible="false" height="40" click="op('prev')"/>
<mx:HBox borderStyle="solid" borderThickness="4" borderColor="#FCFDFE">
<mx:Image id="img" width="560" height="418" scaleContent="true" maintainAspectRatio="false"
 />
</mx:HBox>
<mx:Button id="btnRight" label="&gt;&gt;" visible="false" height="40" click="op('next')"/>
</mx:HBox>


<mx:HBox verticalAlign="middle" width="936">
<mx:Button id="btnLeft2" label="&lt;&lt;" height="40" click="opH('prev')"/>
<mx:HorizontalList id="photoList" width="100%" height="100" selectedIndex="0" cornerRadius="5"
  itemClick="itemHandle(event)" columnCount="{pageSize}" horizontalScrollPolicy="off" themeColor="#FB0707">
<mx:itemRenderer>
<mx:Component>
<mx:HBox width="90" height="90" borderStyle="solid" borderThickness="1" borderColor="#000000">
<mx:Image width="100%" height="100%" maintainAspectRatio="false" source="{data.url}" toolTip="{data.tip}"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:HorizontalList>
<mx:Button id="btnRight2" label="&gt;&gt;" height="40" click="opH('next')"/>
</mx:HBox>








<mx:Style>
ToolTip{
font-size:12px;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.ListEvent;
import mx.collections.ArrayCollection;
[Bindable]
private var photosArr:ArrayCollection=null;


[Bindable]
private var pageSize:int=5; //每页记录数
[Bindable]
private var pageIndex:int=0; //页数
[Bindable]
private var total:int=0; //总记录数
[Bindable]
private var totalPage:int=0; //总记录数


//初始化
private function onInit():void
{
total=12; //总记录数
this.getPage();
this.onLoad(pageIndex);
}


private function getPage():void
{
//获得总页数
if (total % pageSize == 0)
{
totalPage=total / pageSize;
}
else
{
totalPage=(total / pageSize) + 1;
}
}


private function onLoad(pageIndex:Number):void
{
photosArr=new ArrayCollection();
var begin:Number=(pageIndex * pageSize) + 1;
var end:Number=(pageIndex * pageSize) + pageSize;
for (var i:int=begin; i <= end; i++)
{
if (i <= total)
{
var obj:Object=new Object();
obj.url="img/" + i + ".jpg";
obj.tip="图片" + i;
photosArr.addItem(obj);
}
}
photoList.dataProvider=photosArr;
photoList.selectedIndex=0;
img.source=photoList.selectedItem.url;
img.toolTip=photoList.selectedItem.tip;
}


//图片上一个或下一个
private function op(op:String):void
{
var ix:Number=photoList.selectedIndex;
var len:Number=photosArr.length;


if (op == "prev")
{
if (ix >= 0)
{
ix-=1;
photoList.selectedIndex=ix;
//如果是第一个，那么跳到上一页
if (ix == -1)
{
this.opH("prev");
photoList.selectedIndex=pageSize;
}
}
}
else
{
if (ix < len)
{
ix+=1;
photoList.selectedIndex=ix;
//如果是最后一个，那么跳到下一页
if (ix % pageSize == 0)
{
this.opH("next");
}
}
}
img.source=photoList.selectedItem.url;
img.toolTip=photoList.selectedItem.tip;


}


//list的列表


private function opH(op:String):void
{
if (op == "prev")
{
if (pageIndex > 0)
{
pageIndex-=1;
this.onLoad(pageIndex);
}
}
else
{
if (pageIndex < totalPage - 1)
{
pageIndex+=1;
this.onLoad(pageIndex);
}
}
}


//项目点击显示图片
private function itemHandle(evt:ListEvent):void
{
img.source=photoList.selectedItem.url;
img.toolTip=photoList.selectedItem.tip;
}


//图片按钮显示
private function mouseOverHandler(event:MouseEvent):void
{
btnLeft.visible=true;
btnRight.visible=true;
}


//图片按钮隐藏
private function mouseOutHandler(event:MouseEvent):void
{
btnRight.visible=false;
btnLeft.visible=false;
}
]]>
</mx:Script>
</mx:Application>