<?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="<<" 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=">>" visible="false" height="40" click="op('next')"/>
</mx:HBox>
<mx:HBox verticalAlign="middle" width="936">
<mx:Button id="btnLeft2" label="<<" 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=">>" 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>