先看图片
再上源码
此效果jquery版的请看此处:http://www.cnblogs.com/liulun/archive/2010/11/07/1871145.html
jquery版的没有这个FLASH版的要好
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" backgroundColor="Black" creationComplete="init();"> <fx:Script source="AllenAS.as"> </fx:Script> <fx:Declarations> <mx:HTTPService id="picser" showBusyCursor="true" result="httpHandle(event)" useProxy="false" resultFormat="e4x" method="GET" > </mx:HTTPService> <s:Move id="picMove" target="{spics}"> </s:Move> </fx:Declarations> <s:BorderContainer x="0" y="0" width="100%" height="100%" backgroundColor="#000000" borderVisible="false"> <mx:Image id="bigImg" horizontalCenter="0" verticalCenter="0" /> </s:BorderContainer> <s:BorderContainer x="0" y="0" width="55" height="100%" backgroundAlpha="0" borderVisible="false"> <mx:Image id="btnLeft1" horizontalCenter="0" verticalCenter="0" source="@Embed(source='pic/l1.jpg')" mouseOver="btnLeft_mouseOverHandler(event)" mouseOut="btnLeft_mouseOutHandler(event)" buttonMode="true" /> <mx:Image id="btnLeft2" visible="false" horizontalCenter="0" verticalCenter="0" source="@Embed(source='pic/l2.jpg')" mouseOver="btnLeft_mouseOverHandler(event)" mouseOut="btnLeft_mouseOutHandler(event)" click="btnLeft1_clickHandler(event)" buttonMode="true"/> </s:BorderContainer> <s:BorderContainer y="0" width="55" height="100%" right="0" backgroundAlpha="0" borderVisible="false"> <mx:Image id="btnRight1" horizontalCenter="0" verticalCenter="0" source="@Embed(source='pic/R1.jpg')" mouseOver="btnRight_mouseOverHandler(event)" mouseOut="btnRight_mouseOutHandler(event)" buttonMode="true"/> <mx:Image id="btnRight2" visible="false" horizontalCenter="0" verticalCenter="0" source="@Embed(source='pic/R2.jpg')" mouseOver="btnRight_mouseOverHandler(event)" mouseOut="btnRight_mouseOutHandler(event)" click="btnRight1_clickHandler(event)" buttonMode="true"/> </s:BorderContainer> <s:BorderContainer id="spics" width="100%" height="86" bottom="0" backgroundAlpha="0" borderVisible="false"> <s:HGroup id="picgroup" horizontalCenter="0" verticalCenter="0" gap="4"> </s:HGroup> </s:BorderContainer> </s:Application> import flash.events.MouseEvent; import flash.net.URLRequest; import mx.controls.Alert; import mx.controls.Image; import mx.messaging.messages.ErrorMessage; import mx.rpc.events.ResultEvent; import org.bytearray.gif.events.FileTypeEvent; import org.bytearray.gif.events.FrameEvent; import org.bytearray.gif.events.GIFPlayerEvent; import org.bytearray.gif.events.TimeoutEvent; import org.bytearray.gif.player.GIFPlayer; import spark.components.HGroup; import spark.effects.Move; private var _myGIFPlayer:GIFPlayer=new GIFPlayer(); private var pic_num:int; private function init():void { var p:String = this.url.substr(this.url.indexOf('?')); picser.url = "../share/share_dat.asp"+p; picser.send(); } protected function btnLeft_mouseOverHandler(event:MouseEvent):void { btnLeft2.visible=true; btnLeft1.visible=false; } protected function btnLeft_mouseOutHandler(event:MouseEvent):void { btnLeft1.visible=true; btnLeft2.visible=false; } protected function btnRight_mouseOverHandler(event:MouseEvent):void { btnRight2.visible=true; btnRight1.visible=false; } protected function btnRight_mouseOutHandler(event:MouseEvent):void { btnRight1.visible=true; btnRight2.visible=false; } protected function httpHandle(e:ResultEvent):void { var pics:XML = e.result as XML; var piclist:XMLList = pics.children(); var item:XML; for each(item in piclist) { createOnespic(item.attribute("spic"),item.attribute("bpic")); } pic_num = picgroup.numElements; var timg:Image = picgroup.getElementAt(pic_num/2) as Image; set_pic(timg); } private function set_pic(t:Image):void { var temp:Image; var index1:int; for(var i:int=0;i<pic_num;i++) { temp = picgroup.getElementAt(i) as Image; if(temp == t) { index1=i; } temp.alpha = 0.5; temp.trustContent = true; } bigImg.load(t.name.toString()); t.trustContent = false; t.alpha = 1; if(this.width<pic_num*80) { picMove.stop(); picMove.xFrom = spics.x; picMove.xTo = this.width/2 - index1*80 - 38; picMove.duration=2000; picMove.play(); } } private function createOnespic(surl:String,burl:String):void { var pic:Image; pic = new Image(); pic.source = surl; pic.width = 76; pic.height = 76; pic.buttonMode = true; pic.name = burl; pic.addEventListener(MouseEvent.CLICK, img_click); pic.trustContent = true; pic.alpha = 0.5; picgroup.addElement(pic); } protected function img_click(event:MouseEvent):void { var t:Image = event.currentTarget as Image; set_pic(t); } protected function btnLeft1_clickHandler(event:MouseEvent):void { var temp:Image; var i:int=0 for(;i<pic_num;i++) { temp = picgroup.getElementAt(i) as Image; if(!temp.trustContent) { break; } } i-=1; if(i<0) { i=pic_num-1; } set_pic(picgroup.getElementAt(i) as Image); } protected function btnRight1_clickHandler(event:MouseEvent):void { var temp:Image; var i:int=0 for(;i<pic_num;i++) { temp = picgroup.getElementAt(i) as Image; if(!temp.trustContent) { break; } } i+=1; if(i>pic_num-1) { i=0; } set_pic(picgroup.getElementAt(i) as Image); }