• flash/flex图片幻灯片(小图列表,大图展示)


    先看图片

    再上源码

    此效果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);
    }
    		
    
  • 相关阅读:
    年终总结
    javascript高级编程笔记05(面向对象)
    angularApi网站用vue重构
    js闭包的理解
    2014/12/23 四川 晴
    (转)sql的join图解
    JavaScript面向对象程序设计:数组
    JS中的原型继承机制
    技术感慨篇 四川 阴
    2014/11/14 绵阳 阴
  • 原文地址:https://www.cnblogs.com/liulun/p/1871314.html
Copyright © 2020-2023  润新知