公司要求将导航与banner轮播放在一块,做一个Flash,一是浏览器支持效果好,二是资源消耗低,图片与导航内容要求在JS里面配置,以便开发。弄好之后,把banner轮播部分单独提取出来,做成一个小插件,与大家共享。先看效果
效果共有13种,分别为,其中飞行过渡,挤压过度,划入过度都有多个方向,由dimension参数控制,需要的方向要求的可自行进行修改,编译:
effects = new Array(); effects.push( { type:Iris, direction:Transition.IN, duration:speed, easing:Strong.easeOut } );//方块扩展效果 effects.push( {type:Blinds, direction:Transition.IN, duration:speed, easing:None.easeNone, numStrips:20, dimension:0} );//遮帘(纵向) effects.push( {type:Blinds, direction:Transition.IN, duration:speed, easing:None.easeNone, numStrips:20, dimension:1} );//遮帘(横向) effects.push( {type:Fade, direction:Transition.IN, duration:speed, easing:None.easeNone});//淡入 effects.push( {type:Fade, direction:Transition.OUT, duration:speed, easing:None.easeNone} );//淡出 effects.push( {type:Fly, direction:Transition.IN, duration:speed, easing:Elastic.easeOut, startPoint:1} );//飞行过渡,9个不同方向 effects.push( {type:Iris, direction:Transition.IN, duration:speed, easing:Strong.easeOut, startPoint:5, shape:Iris.CIRCLE} );//光圈过渡 effects.push( {type:Photo, direction:Transition.IN, duration:speed, easing:None.easeNone} );//渐变曝光 effects.push( {type:PixelDissolve, direction:Transition.IN, duration:speed, easing:None.easeNone, xSections:50, ySections:50} );//像素溶解 effects.push( {type:Rotate, direction:Transition.IN, duration:speed, easing:Strong.easeInOut, ccw:false, degrees:360 } );//旋转过渡 effects.push( {type:Squeeze, direction:Transition.IN, duration:speed, easing:Elastic.easeOut, dimension:1});//挤压过渡,2个方向 effects.push( {type:Wipe, direction:Transition.IN, duration:speed, easing:None.easeNone, startPoint:1} );//划入过渡8个方向 effects.push( {type:Zoom, direction:Transition.IN, duration:speed, easing:Elastic.easeOut} );//弹性缩放
使用方法:
用法力求简单,将imageShow.js加入到网页中需要进行图片轮播的地方即可,JS内容为(可在附近里面下载)。
var pic_width=943; //图片宽度 var pic_height=354; //图片高度 var stop_time=4000; //图片停留时间(1000为1秒钟) var switch_type=-1;//图片切换方式 var speed = 3;//图片切换速度,以秒计算 var imag=new Array();//图片 var imglink = new Array();//图片链接 //可编辑内容结束 imag[1]="E:\\FlashEx\\imageSwitch\\imageSwitch\\src\\images\\6.jpg"; imag[2]="E:\\FlashEx\\imageSwitch\\imageSwitch\\src\\images\\7.jpg"; imag[3]="E:\\FlashEx\\imageSwitch\\imageSwitch\\src\\images\\3.jpg"; imag[4]="E:\\FlashEx\\imageSwitch\\imageSwitch\\src\\images\\4.jpg"; imag[5]="E:\\FlashEx\\imageSwitch\\imageSwitch\\src\\images\\5.jpg"; imglink[1]="page/index.html"; imglink[2]="page/news.html"; imglink[3]="page/ppzs.html"; imglink[4]="page/server.html"; imglink[5]="page/shiping.html"; var swf_height=pic_height; var pics="", texts="",imglinks=""; for(var i=1; i<imag.length; i++){ pics=pics+("|"+imag[i]); imglinks = imglinks+("|"+imglink[i]); } pics=pics.substring(1); imglinks = imglinks.substring(1); document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cabversion=6,0,0,0" width="'+ pic_width +'" height="'+ swf_height +'">'); document.write('<param name="movie" value="imageShow.swf">'); document.write('<param name="quality" value="high"><param name="wmode" value="opaque">'); document.write('<param name="FlashVars" value="pics='+pics+'&pic_width='+pic_width+'&pic_height='+pic_height+' &imglinks='+imglinks+' &speed='+speed+' &switch_type='+switch_type+'&stop_time='+stop_time+'">'); document.write('<embed wmode="transparent" src="imageShow.swf" FlashVars="pics='+pics+'&pic_width='+pic_width+'&pic_height='+pic_height+" &imglinks="+imglinks+' &speed='+speed+' &switch_type='+switch_type+'&stop_time='+stop_time+'" quality="high" width="'+ pic_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object>');
如上所示,一共有7个参数可供设置
var pic_width=943; //图片宽度
var pic_height=354; //图片高度
var stop_time=4000; //图片停留时间(1000为1秒钟)
var switch_type=-1;//图片切换方式,-1代表随机,从0至12
var speed = 3;//图片切换速度,以秒计算
var imag=new Array();//图片
var imglink = new Array();//图片链接
程序原理:
图片的切换过程主要是借助了AS3自带的TransitionManager图片切换类来完成的,要注意的问题是如何将要展示的图片深度调到最高。我是利用下面的方法进行深度排列的
//重新排列深度 private function resetDepth(depth:Number):void { imageContainer.swapChildrenAt(imageNum - 2, imageNum - 1);//将最后两个元素交换 imageContainer.swapChildrenAt(imageContainer.getChildIndex(images[depth]), imageNum-1);//将当前元素与最后一个元素交换 }
先将最后两个元素交换,以达到播放下一张图片时,背景显示的是前一张已经播放完的图片。
然后将当前元素与最后一个元素交换,将达到显示出当前元素的目的。
浏览器支持:
IE6+,Firefox,opera,safari(其它的没测试,应该没问题)