前些天公司要弄个,鼠标放在左右按钮上,可循环滑动的导航栏,从网上找了些资料,做了一个
注意事项:
为了不使滚动条产生,应该使画布的 horizontalScrollPolicy="off"
使图片产生移动效果,用标签 <mx:Move id="moveR" xBy="110" duration="500"/> xBy 为移动的相对距离。
效果图:
下面是源代码,欢迎大牛们指教:
<?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"
creationComplete="init()"
backgroundColor="#7F95A0"
minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.controls.Image;
import mx.events.EffectEvent;
import mx.validators.ValidationResult;
private var itemList:Array=new Array;
private var curIndex:int;
private var lFlag:Boolean;
private var rFlag:Boolean;
private var i:int;
private function init():void{
lFlag = true;
rFlag = true;
i = 1;
var img1:Image = new Image();
img1.width = 100;
img1.height = 100;
img1.source = "asset/1.jpg";
var img2:Image = new Image();
img2.width = 100;
img2.height = 100;
img2.source = "asset/2.jpg";
var img3:Image = new Image();
img3.width = 100;
img3.height = 100;
img3.source = "asset/3.jpg";
img3.addEventListener(MouseEvent.CLICK,function():void{
Alert.show("chenggong");
});
var img4:Image = new Image();
img4.width = 100;
img4.height = 100;
img4.source = "asset/4.jpg";
var img5:Image = new Image();
img5.width = 100;
img5.height = 100;
img5.source = "asset/5.jpg";
var img6:Image = new Image();
img6.width = 100;
img6.height = 100;
img6.source = "asset/6.jpg";
itemList.push(img1);
itemList.push(img2);
itemList.push(img3);
itemList.push(img4);
itemList.push(img5);
itemList.push(img6);
initView();
}
private function initView():void{
for(var i:int=0;i<(itemList.length-1);i++){
itemList[i].x=110*i;
item_cav.addChild(itemList[i]);
}
itemList[itemList.length-1].x=-110;
item_cav.addChild(itemList[itemList.length-1]);
//对向左滑动动作的结束做监听
moveL.addEventListener(EffectEvent.EFFECT_END,function():void{
i++;
if(i==7){
i = 1;
if(!lFlag){
moveL.end();
lFlag = true;
}else{
moveL.end();
rollL();
}
}
});
//对向右滑动动作的结束做监听
moveR.addEventListener(EffectEvent.EFFECT_END,function():void{
i++;
if(i==7){
i = 1;
if(!rFlag){
moveR.end();
rFlag = true;
}else{
moveR.end();
rollR();
}
}
});
}
//向左的动作
private function rollL():void{
if(moveR.isPlaying==false){
if(moveL.isPlaying==false){
if(curIndex==0)
itemList[itemList.length-1].x+=(itemList.length)*110;
else
itemList[curIndex-1].x+=(itemList.length)*110;
if(curIndex==itemList.length-1)
curIndex=0;
else
curIndex+=1;
moveL.play(itemList);
}
}
}
//停止向左滑动
private function stopRollL():void{
lFlag = false;
}
//向右的动作
private function rollR():void{
if(moveL.isPlaying==false){
if(moveR.isPlaying==false){
if(curIndex==0)
curIndex=itemList.length-1;
else
curIndex-=1;
if(curIndex==0)
itemList[itemList.length-1].x-=(itemList.length)*110;
else
itemList[curIndex-1].x-=(itemList.length)*110;
moveR.play(itemList);
}
}
}
//停止向右滑动
private function stopRollR():void{
rFlag = false;
}
]]>
</fx:Script>
<fx:Declarations>
<mx:Move id="moveR" xBy="110" duration="1000" />
<mx:Move id="moveL" xBy="-110" duration="1000" />
</fx:Declarations>
<mx:HBox horizontalCenter="0" verticalCenter="0">
<mx:Button label="<" height="75" width="30" mouseMove="rollL()" mouseOut="stopRollL();"/>
<mx:Canvas id="item_cav" width="320" height="100" horizontalScrollPolicy="off">
</mx:Canvas>
<mx:Button label=">" height="75" width="30" mouseMove="rollR()" mouseOut="stopRollR();"/>
</mx:HBox>
</s:Application>