生活随笔
收集整理的這篇文章主要介紹了
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]); |
| 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(其它的沒測試,應該沒問題)
總結
以上是生活随笔為你收集整理的JS+Flash 图片轮播的全部內容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。