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

简介: 先看图片 再上源码 此效果jquery版的请看此处:http://www.cnblogs.com/liulun/archive/2010/11/07/1871145.html jquery版的没有这个FLASH版的要好 ...

先看图片

再上源码

此效果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);
}
		
目录
相关文章
[笔记]音视频学习之SDL篇《二》 绘制平铺的背景图并居中放置另一图片
[笔记]音视频学习之SDL篇《二》 绘制平铺的背景图并居中放置另一图片
|
6月前
Elementui-Image组件,单个图片点击放大展示
Elementui-Image组件,单个图片点击放大展示
243 2
|
7月前
404彩色文字页源码下载
404彩色文字页源码下载
29 2
404彩色文字页源码下载
|
7月前
|
JavaScript 容器
富文本的图片添加点击放大功能
思路:富文本加载后,dom出全部img元素,然后各自单独添加点击事件
268 3
|
7月前
|
前端开发 小程序
uniapp 将标题背景更换背景图片 完美解决(附加源码+实现效果图)
uniapp 将标题背景更换背景图片 完美解决(附加源码+实现效果图)
902 0
|
移动开发 前端开发 HTML5
前端 HTML5 Svg 画板(支持视频、图片上涂鸦,支持缩放、修改、颜色、复选...)
前端 HTML5 Svg 画板(支持视频、图片上涂鸦,支持缩放、修改、颜色、复选...)
248 0
swiper轮播图缩略图效果彩色到黑白的变化的解决方案
swiper轮播图缩略图效果彩色到黑白的变化的解决方案
90 0
|
前端开发 JavaScript
一颗红心,三手准备,分别基于图片(img)/SCSS(样式)/SVG动画实现动态拉轰的点赞按钮特效
华丽炫酷的动画特效总能够让人心旷神怡,不能自已。艳羡之余,如果还能够探究其华丽外表下的实现逻辑,那就是百尺竿头,更上一步了。本次我们使用图片、SCSS样式以及SVG图片动画来实现“点赞”按钮的动画特效,并比较不同之处。
一颗红心,三手准备,分别基于图片(img)/SCSS(样式)/SVG动画实现动态拉轰的点赞按钮特效
|
图形学
PPT制作三大技巧:图标 、图片背景透明和自动函数
PPT制作三大技巧:图标 、图片背景透明和自动函数
299 0
PPT制作三大技巧:图标 、图片背景透明和自动函数