作者asdfg5247 (天天)
看板Web_Design
標題[問題] 用js刻輪播時遇到的問題
時間Tue May 22 20:49:10 2018
大家好，目前小弟正在學用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://webptt.com/m.aspx?n=bbs/Web_Design/M.1526993355.A.7A3.html
1F：→ Rinorune: 可以用console.log去偵錯 看哪裡跟你預期不同 05/22 21:21
可是如果是已知的地方出錯，卻不知道怎麼修改呢QQ?
因為目前我可以看的懂，卻還不會寫，當然一些簡單的還OK!
※ 編輯: asdfg5247 (1.165.91.228), 05/22/2018 22:25:50
2F：推 chen5252: 我照他的code貼去codepen是可以正常輪播，到最後一張也 05/22 23:23
3F：→ chen5252: 會往回走耶 05/22 23:23
真的假的，可是我幾乎沒有少掉任何cod，完全照抄卻不行耶!也太奇怪
※ 編輯: asdfg5247 (1.165.91.228), 05/22/2018 23:28:34
4F：推 lin009: 你有把 code 放到線上嗎~? 貼上來大家比較好 debug~ 05/22 23:32
5F：→ chen5252: 沒看到code無法解，找個地方貼出來大家也才可以幫你看看 05/22 23:38
6F：→ chen5252: 問題在哪 05/22 23:38
好的我放了!
https://jsfiddle.net/admo378z/1/
先謝謝各位大大的幫忙QQ
※ 編輯: asdfg5247 (1.165.91.228), 05/23/2018 12:50:47
7F：推 chen5252: 你的banner_li 沒有抓到東西 05/23 14:57
8F：推 chen5252: 應該是說你的banner_li到showtime就沒東西了 05/23 15:16
9F：推 chen5252: 範例是將整個showtime包在.onload裡面，你把它拆成兩個 05/23 15:28
10F：→ chen5252: ，到了showtime裡面才會抓不到你在onload裡宣告的元素 05/23 15:28
11F：推 lin009: 這樣不算完全照抄吧 XD 05/24 13:46
13F：→ lin009: 求 05/24 13:47
14F：→ lin009: 除了 chen 大說的問題外，ul 的 selector 也寫錯了，另外 05/24 13:48
15F：→ lin009: isgo 一直都是 false 05/24 13:48
對!我一開始是知道說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
16F：推 lin009: 因為你把 js 放在 head 裡面，如果沒寫 onload 的話，瀏覽 05/24 22:12
17F：→ lin009: 器會先解析這段 script，然後才讀到你寫的那些 banner_ul 05/24 22:12
18F：→ lin009: 等等的元件 05/24 22:12
19F：→ lin009: 總之瀏覽器在執行這段 script 時，根本還沒有這些 element 05/24 22:13
20F：→ lin009: ，所以就讀不到了 05/24 22:13
21F：→ lin009: 通常有幾種解法： 05/24 22:18
22F：→ lin009: 1. 寫 onload，叫瀏覽器等 window 都準備好後再跑這段 05/24 22:18
23F：→ lin009: 2. 把 script 放在 body 的結束 tag 前面，這樣確定瀏覽器 05/24 22:18
24F：→ lin009: 會先讀到 其他 html 05/24 22:18
25F：→ lin009: 3. script tag 上可以設定其他 attr 讓它晚點執行 05/24 22:18
26F：推 SeanGGG: 改動UI的script大部分建議放在</body>前 05/24 22:55
一整個恍然大悟!原本我以為放body跟放head沒有差別!謝謝lin大跟chen大、GGG大
※ 編輯: asdfg5247 (125.224.1.195), 05/25/2018 10:12:21