做一个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/