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

作者: asdfg5247 (asdfg5247)   2018-05-22 20:49:10
大家好,目前小弟正在學用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來判斷最後一張圖片會比較好?
作者: Rinorune (杜)   2018-05-22 21:21:00
可以用console.log去偵錯 看哪裡跟你預期不同
作者: chen5252 (鋒炮炸裂)   2018-05-22 23:23:00
我照他的code貼去codepen是可以正常輪播,到最後一張也會往回走耶
作者: lin009 (lin009)   2018-05-22 23:32:00
你有把 code 放到線上嗎~? 貼上來大家比較好 debug~
作者: chen5252 (鋒炮炸裂)   2018-05-22 23:38:00
沒看到code無法解,找個地方貼出來大家也才可以幫你看看問題在哪
作者: lin009 (lin009)   2018-05-24 13:46:00
這樣不算完全照抄吧 XDhttps://jsfiddle.net/admo378z/9/ 你看看符不符合你的需求除了 chen 大說的問題外,ul 的 selector 也寫錯了,另外isgo 一直都是 false因為你把 js 放在 head 裡面,如果沒寫 onload 的話,瀏覽器會先解析這段 script,然後才讀到你寫的那些 banner_ul等等的元件總之瀏覽器在執行這段 script 時,根本還沒有這些 element,所以就讀不到了通常有幾種解法:1. 寫 onload,叫瀏覽器等 window 都準備好後再跑這段2. 把 script 放在 body 的結束 tag 前面,這樣確定瀏覽器會先讀到 其他 html3. script tag 上可以設定其他 attr 讓它晚點執行
作者: SeanGGG (Sean)   2018-05-24 22:55:00
改動UI的script大部分建議放在</body>前

Links booklink

Contact Us: admin [ a t ] ucptt.com