可循环滚动的导航栏

来源:互联网 发布:保卫萝卜3炮台数据 编辑:程序博客网 时间:2024/05/21 05:37

前些天公司要弄个,鼠标放在左右按钮上,可循环滑动的导航栏,从网上找了些资料,做了一个

注意事项:

为了不使滚动条产生,应该使画布的 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;elseitemList[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;elsecurIndex-=1;if(curIndex==0)itemList[itemList.length-1].x-=(itemList.length)*110;elseitemList[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>




原创粉丝点击