先看图片
再上源码
此效果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);
}
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有