用flex4实现图片的动态切换,动态创建linkbutton按钮,代码如下:
<?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" minWidth="955" minHeight="600"
creationComplete="init()">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.controls.LinkButton;
import mx.utils.*;
import org.osmf.events.TimeEvent;
/**
*定义多少时间循环一次
*/
private var timeNum:int = 2000;
/**
* 定义所要显示的图片数量
*/
[Bindable]
private var picNum:int = 5;
/**
*定义控制图片滚动的下标
*/
private var index:int = picNum;
private function init():void
{
//加载linkbutton样式
styleManager.loadStyleDeclarations("ef.swf");
//动态添加linkbutton以及间隔线
for (var i:int=1;i <= picNum;i++)
{
//添加间隔线
var vr:VRule = new VRule();
vr.x = 495 - 21 * i;
vr.y = 357;
vr.height = 15;
ca.addElement(vr);
//添加linkbutton
var lb:LinkButton = new LinkButton();
lb.id = ("lkb"+ i).toString();
lb.x = 475 - 21 * (i - 1);
lb.y = 352;
lb.height = 20;
lb.width = 20;
lb.label = i.toString();
//初始化样式信息
if (i == picNum){
lb.styleName = "pic";
lb.alpha = 1;
}
else{
lb.alpha = 0.5;
}
//添加点击事件监听
lb.addEventListener(MouseEvent.CLICK,getlkb);
ca.addElement(lb);
}
//一段时间自动调用方法
setInterval(autoPic,timeNum);
}
//获取被鼠标点击的linkbutton
private function getlkb(event:MouseEvent):void
{
if (event.target is LinkButton)
{
index = int((event.target as LinkButton).label);
}
getPic(index);
}
//图片自动切换
private function autoPic():void
{
if (index < 1)
{
index = picNum;
}
getPic(index);
}
//改变图片切换时linkbutton样式
private function changePic(x:int):void
{
//遍历容器,得到所有linkbutton
for each(var pic:Object in ca.getChildren())
{
if (pic is LinkButton)
{
//重置其它linkbutton样式
if (pic.id!="lkb"+x.toString())
{
pic.alpha = 0.1;
pic.styleName = "";
}
//改变当前linkbutton的样式
else
{
pic.alpha = 1;
pic.styleName = "pic";
}
}
}
}
//绑定相应图片到p_w_picpath中
private function getPic(evt:int):void
{
this.p_w_picpath.source = "pictur/"+evt+".jpeg";
changePic(evt);
index --;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<mx:Canvas id="ca" width="600" height="500">
<mx:Image id="p_w_picpath" width="500" height="400" source="pictur/{picNum}.jpeg" buttonMode="true" useHandCursor="true"/>
<mx:VRule x="495" y="357" height="15"/>
</mx:Canvas>
</s:Application>
转载于:https://blog.51cto.com/evehandwin/1184416