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

最新推荐文章于 2021-06-19 05:30:21 发布

耗子王

最新推荐文章于 2021-06-19 05:30:21 发布

阅读量827

点赞数

分类专栏： javascript 文章标签： javascript flash

javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

做一个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, 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(其它的没测试，应该没问题)

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

耗子王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flash+js幻灯片超炫的效果，值得一看

做一个Flash，一是浏览器支持效果好，二是资源消耗低，图片与导航内容要求在JS里面配置，以便开发。弄好之后，把banner轮播部分单独提取出来，做成一个小插件，与大家共享。先看效果效果共有13种，分别为，其中飞行过渡，挤压过度，划入过度都有多个方向，由dimension参数控制，需要的方向要求的可自行进行修改，编译：effects = newA
复制链接

扫一扫

专栏目录