[問題] 用js刻輪播時遇到的問題

看板Web_Design作者 (天天)時間6年前 (2018/05/22 20:49), 6年前編輯推噓8(8推 0噓 18→)
留言26則, 4人參與, 6年前最新討論串1/1
大家好，目前小弟正在學用JS刻輪播 使用的教學是採用這個網站教學的 https://goo.gl/LJS1e6 但是當照他所寫的去做時，發現到最後一張圖片時並沒有往回走 代碼幾乎跟他的一模一樣，畢竟是參考他的 目前有想過將代碼改成 function showtime() { timer = setInterval(function () { count++; banner_ul.style.transform = "translate(" + -1215 * count + "px)"; if (count > banner_li.length) { count = 0; banner_ul.style.transform = "translate(" + 0 + "px)"; } },3000); 直接到要超過最後一張圖片時，將整個ul變成0px 但是還是沒有觸發if事件orz 因為卡很久了，想請問如果是他的版本，為什麼第二個if並沒有觸發呢? 如果是我的版本，是不是要弄for循環，然後以if來判斷最後一張圖片會比較好? -- 人生若只如初見， 何事秋風悲畫扇。 等閒變卻故人心， -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 1.165.91.228 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1526993355.A.7A3.html
→
05/22 21:21, 6年前 , 1F
可以用console.log去偵錯 看哪裡跟你預期不同
05/22 21:21, 1F
可是如果是已知的地方出錯，卻不知道怎麼修改呢QQ? 因為目前我可以看的懂，卻還不會寫，當然一些簡單的還OK! ※ 編輯: asdfg5247 (1.165.91.228), 05/22/2018 22:25:50
推
05/22 23:23, 6年前 , 2F
我照他的code貼去codepen是可以正常輪播，到最後一張也
05/22 23:23, 2F
→
05/22 23:23, 6年前 , 3F
會往回走耶
05/22 23:23, 3F
真的假的，可是我幾乎沒有少掉任何cod，完全照抄卻不行耶!也太奇怪 ※ 編輯: asdfg5247 (1.165.91.228), 05/22/2018 23:28:34
推
05/22 23:32, 6年前 , 4F
你有把 code 放到線上嗎~? 貼上來大家比較好 debug~
05/22 23:32, 4F
→
05/22 23:38, 6年前 , 5F
沒看到code無法解，找個地方貼出來大家也才可以幫你看看
05/22 23:38, 5F
→
05/22 23:38, 6年前 , 6F
問題在哪
05/22 23:38, 6F
好的我放了!https://jsfiddle.net/admo378z/1/ 先謝謝各位大大的幫忙QQ ※ 編輯: asdfg5247 (1.165.91.228), 05/23/2018 12:50:47
推
05/23 14:57, 6年前 , 7F
你的banner_li 沒有抓到東西
05/23 14:57, 7F
推
05/23 15:16, 6年前 , 8F
應該是說你的banner_li到showtime就沒東西了
05/23 15:16, 8F
推
05/23 15:28, 6年前 , 9F
範例是將整個showtime包在.onload裡面，你把它拆成兩個
05/23 15:28, 9F
→
05/23 15:28, 6年前 , 10F
，到了showtime裡面才會抓不到你在onload裡宣告的元素
05/23 15:28, 10F
推
05/24 13:46, 6年前 , 11F
這樣不算完全照抄吧 XD
05/24 13:46, 11F
→
05/24 13:46, 6年前 , 12F
https://jsfiddle.net/admo378z/9/ 你看看符不符合你的需
05/24 13:46, 12F
→
05/24 13:47, 6年前 , 13F
求
05/24 13:47, 13F
→
05/24 13:48, 6年前 , 14F
除了 chen 大說的問題外，ul 的 selector 也寫錯了，另外
05/24 13:48, 14F
→
05/24 13:48, 6年前 , 15F
isgo 一直都是 false
05/24 13:48, 15F
對!我一開始是知道說banner_ul banner_li沒抓到值，但是我想說前面有windows.omload 沒看到前面的function，可是我想請問，為什麼要windows.onload呢?如果只打 var banner_ul = document.getelementbyID的話呢?有試過但是好像無法，不知道為什麼 ※ 編輯: asdfg5247 (1.165.91.228), 05/24/2018 21:22:48
推
05/24 22:12, 6年前 , 16F
因為你把 js 放在 head 裡面，如果沒寫 onload 的話，瀏覽
05/24 22:12, 16F
→
05/24 22:12, 6年前 , 17F
器會先解析這段 script，然後才讀到你寫的那些 banner_ul
05/24 22:12, 17F
→
05/24 22:12, 6年前 , 18F
等等的元件
05/24 22:12, 18F
→
05/24 22:13, 6年前 , 19F
總之瀏覽器在執行這段 script 時，根本還沒有這些 element
05/24 22:13, 19F
→
05/24 22:13, 6年前 , 20F
，所以就讀不到了
05/24 22:13, 20F
→
05/24 22:18, 6年前 , 21F
通常有幾種解法：
05/24 22:18, 21F
→
05/24 22:18, 6年前 , 22F
1. 寫 onload，叫瀏覽器等 window 都準備好後再跑這段
05/24 22:18, 22F
→
05/24 22:18, 6年前 , 23F
2. 把 script 放在 body 的結束 tag 前面，這樣確定瀏覽器
05/24 22:18, 23F
→
05/24 22:18, 6年前 , 24F
會先讀到 其他 html
05/24 22:18, 24F
→
05/24 22:18, 6年前 , 25F
3. script tag 上可以設定其他 attr 讓它晚點執行
05/24 22:18, 25F
推
05/24 22:55, 6年前 , 26F
改動UI的script大部分建議放在</body>前
05/24 22:55, 26F
一整個恍然大悟!原本我以為放body跟放head沒有差別!謝謝lin大跟chen大、GGG大 ※ 編輯: asdfg5247 (125.224.1.195), 05/25/2018 10:12:21
‣ 更多 asdfg5247 的文章
文章代碼(AID): #1R117BUZ (Web_Design)