一个图片循环滚动的例子代码
如果画布中有三个格子,那么在移动中,至少要有4个格子被看见,要要满足开始事既能向左移又能向右移,应该至少有5个格子。
格子的数据由一个数组提供,所以:数组长度应该>=5. (itemList)
为了不使滚动条产生,应该使画布的 horizontalScrollPolicy="off"
使图片产生移动效果,用标签 <mx:Move id="moveR" xBy="110" duration="500"/> xBy 为移动的相对距离。
触发这个效果,要用到 moveR.play(itemList) itemList 的所有格子都要移动。
左移或右移前,都要先改变一个格子的相对位置 保证 : 移动之前,框外有 两个格子,移动之后,框外有 一个格子 如图:
最初摆放
左移
右移
代码
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()"> <mx:Script> <![CDATA[ import mx.validators.ValidationResult; private var itemList:Array=new Array; private var curIndex:int; private function init():void{ itemList.push(new RollItem); itemList.push(new RollItem); itemList.push(new RollItem); itemList.push(new RollItem); itemList.push(new RollItem); initView(); } private function initView():void{ for(var i:int=0;i<(itemList.length-1);i++){ itemList[i].itemData=i; itemList[i].x=110*i; item_cav.addChild(itemList[i]); } itemList[itemList.length-1].itemData=itemList.length-1; itemList[itemList.length-1].x=-110; item_cav.addChild(itemList[itemList.length-1]); } private function rollL():void{ 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 rollR():void{ 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); } } ]]> </mx:Script> <mx:Move id="moveR" xBy="110" duration="500"/> <mx:Move id="moveL" xBy="-110" duration="500"/> <mx:HBox horizontalCenter="0" verticalCenter="0"> <mx:Button label="<" height="98" click="rollL()"/> <mx:Canvas id="item_cav" width="320" height="100" horizontalScrollPolicy="off"> </mx:Canvas> <mx:Button label=">" height="100" click="rollR()"/> </mx:HBox> </mx:Application>
<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="100" backgroundAlpha="0.2" backgroundColor="0xffffff" > <mx:Script> <![CDATA[ [Bindable] public var itemData:String; ]]> </mx:Script> <mx:Image source="abc.jpg" /> <mx:Text text="{itemData}" x="16" y="37"/> </mx:Canvas>