※ 引述《eric8347 (殺人電風扇)》之銘言： : http://preview.zcool.com.cn/code/js/04/1/ : 無意間看到的一個很漂亮的相簿 : 而且他竟然是用javascript+css寫出來的 : 但是我發現他這個相簿照片都不會固定從那一張開始 : 會隨機亂跳 : 稍微看了一下他的程式碼 : 發覺好複雜喔＝ ＝... : 不知道有沒有人可以改寫他的程式碼 : 讓它可以固定從第一張開始播放 其實沒把js拆出來或compressed，要看source就還蠻簡單的， 從進入點開始分析幾乎都不會有問題。 大概分析一下這隻程式的進入點 首先，他的相簿可以支援一個以上得Flow， 所以在init()裡面可以看到 instances.push( new ImageFlow(div, size, zoom, border) ); 然後再後面可以看到 setInterval(function () { var i = instances.length; while (i--) instances[i].run(); }, 16); 這是ImageFlow最早的進入點 接著trace一下 ImageFlow.run() run : function (res) { var i = this.NF; while (i--) this.diapos[i].move(res); } diapos在ImageFlow Constructs可以找到蛛絲馬跡 for (var i = 0, o; o = img[i]; i++) { this.diapos[i] = new Diapo(this, i, o.rel, o.title || '- ' + i + ' -', o.innerHTML || o.rel, o.href || '', o.target || '_self' ); } 接著找到Diapo的move，他是放在 prototype 裡面。 (prototype是所有該類別物件會共有的方法） move裡面說，如果這個物件已經被讀取完成就進行移動， 否則就看他圖片載入好了沒（而且要有寬度）， 如果ok 就進行Diapo的 init()並顯示圖片。 所以再回頭看看這段 （NF是 img長度 ＝ diapos長度） run : function (res) { var i = this.NF; while (i--) this.diapos[i].move(res); } 你會看到每次開始位置都不太一樣，不過是因為在進行這段code的時候， 圖片的讀取進度都不太一樣的原因，他會顯示最後一張在跑到這一段時， 已經完成的圖片。 (ex.如果你用fx開，會每次都顯示最後一張。） ──────────────────────────────── 看到這裡我想我已經給了很多提示，關於怎麼從第一張開始播放... tip1.確定第一張已經讀取完成 tip2.修改載入的順序 剩下的是你自己要去努力的部份了 good luck -- What you want to have ? / What you have? 從書本中，你可以發現我的各種興趣。 從ＣＤ中，你可以瞭解我所喜歡的偶像明星。 或許從文字你很難以瞭解一個人，但從物品可以。 My Ppolis , My past. http://ppolis.tw/user/Tony1223 --

※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 220.134.27.68