加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Flash+js幻灯片超炫的效果,值得一看

发布时间:2020-12-15 17:35:06 所属栏目:百科 来源:网络整理
导读:做一个Flash,一是浏览器支持效果好,二是资源消耗低,图片与导航内容要求在JS里面配置,以便开发。弄好之后,把banner轮播部分单独提取出来,做成一个小插件,与大家共享。先看效果 地址:http://files.cnblogs.com/xiaoruoen/imageSwitch.swf 效果共有13种

做一个Flash,一是浏览器支持效果好,二是资源消耗低,图片与导航内容要求在JS里面配置,以便开发。弄好之后,把banner轮播部分单独提取出来,做成一个小插件,与大家共享。先看效果

地址:http://files.cnblogs.com/xiaoruoen/imageSwitch.swf

效果共有13种,分别为,其中飞行过渡,挤压过度,划入过度都有多个方向,由dimension参数控制,需要的方向要求的可自行进行修改,编译:

effects = new Array ();
effects.push( { type:Iris,direction:Transition.IN,duration:speed,easing:Strong.eaSEOut } ); //方块扩展效果
effects.push( {type:Blinds,easing:None.easeNone,numStrips: 20 ,dimension: 0 } ); //遮帘(纵向)
effects.push( {type:Blinds,dimension: 1 } ); //遮帘(横向)
effects.push( {type:Fade,easing:None.easeNone}); //淡入
effects.push( {type:Fade,direction:Transition.OUT,easing:None.easeNone} ); //淡出
effects.push( {type:Fly,easing:Elastic.eaSEOut,startPoint: 1 } ); //飞行过渡,9个不同方向
effects.push( {type:Iris,easing:Strong.eaSEOut,startPoint: 5 ,shape:Iris.CIRCLE} ); //光圈过渡
effects.push( {type:Photo,easing:None.easeNone} ); //渐变曝光
effects.push( {type:PixelDissolve,xSections: 50 ,ySections: 50 } ); //像素溶解
effects.push( {type:Rotate,easing:Strong.easeInOut,ccw: false ,degrees: 360 } ); //旋转过渡
effects.push( {type:Squeeze,dimension: 1 }); //挤压过渡,2个方向
effects.push( {type:Wipe,startPoint: 1 } ); //划入过渡8个方向
effects.push( {type:Zoom,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:FlashEximageSwitchimageSwitchsrcimages6.jpg" ;
imag[2]= "E:FlashEximageSwitchimageSwitchsrcimages7.jpg" ;
imag[3]= "E:FlashEximageSwitchimageSwitchsrcimages3.jpg" ;
imag[4]= "E:FlashEximageSwitchimageSwitchsrcimages4.jpg" ;
imag[5]= "E:FlashEximageSwitchimageSwitchsrcimages5.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" 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(其它的没测试,应该没问题)




转自:http://www.heymemory.com/blog/8/

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读