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>