JS+Flash 图片轮播

用法力求简单，将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="data: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(其它的没测试，应该没问题)

JS+Flash 图片轮播相关推荐

2个js实现图片轮播效果（用）
第一个(使用) 不过要注意在web.config中将该location的位置的访问权限设为allow user="*",设置了deny user="?"或&qu ...
html多图轮播淡入淡出js,原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在 ...
html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
JS实现图片轮播效果（自动和手动）
本次轮播效果图如下: 具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换 3.底下小按钮切换 ps:由于很多同志反馈无法总有各种奇怪的情况,所以有需要的直接下载整个工程:JS ...
js动画——图片轮播
js动画--图片轮播 1.对搜索引擎友好 2.对美工友好,因为数据和代码是分开的,完全不懂js的都可以用fontpage修改动画内容可以把js代码保存为一个文件然后<script s ...
html+css+js 实现图片轮播效果
html+css+js 实现图片轮播效果图片轮播效果: 会自动向左 || 向右切换图片能手动点击按钮切换图片多用于商品展览等等 --首先我们创建一个盒子进行展览,然后一个< ul> ...
Zepto.js 3D图片轮播旋转插件
下载地址 Zepto.js 3D图片轮播旋转插件,基于jquery的旋转木马图片切换插件. dd:
切换图片尝试写第一个js插件图片轮播
新手发帖,很多方面都是刚入门,有错误的地方请大家见谅,欢迎批评指正最近在看怎么写js插件,实验写了一个简单的图片轮播插件 jqury.picPlay.js . 基本html框架为<div cl ...
纯js制作图片轮播效果
好久没有发博客了,最近都在复习,为了找工作做准备. 前段时间逛了下鼠绘漫画网追海贼王最新漫画,发现他们家的图片轮播效果跟其他网页的图片轮播效果效果不同,看起来更加有趣,于是我尝试了用js复写它. 前提 ...

JS+Flash 图片轮播

JS+Flash 图片轮播相关推荐

最新文章

热门文章