作者pppty (無)
看板Web_Design
標題[問題] 新手請問javascript廣告輪播問題
時間Tue Jul 19 20:17:23 2016
各位好 小弟最近上課學到javascript
想試著做出簡易像廣告輪播的效果(只是初心者 沒有想太難)
目前想做出上面一張大圖 下面有各個小圖
除了大圖輪播之外 滑鼠移到小圖上會自動切換過去
滑鼠沒離開之前大圖不會繼續輪播
但是寫出來之後反應很奇怪
不移到小圖上之前是正常輪播
一開始移到小圖上也能正確切換
但是一離開之後 大圖輪播速度會自動加劇
再移到小圖上他也不會停下來@@a
試了好久解決不了 希望能請經驗豐富的高手指教
如果不能po在板上 請告知小弟 感謝
以下是我的程式碼(註解部分主要是一開始寫好的原始碼)
修改了很多次 可能跟一開始不一樣
(目前沒顧慮排版問題XD)
https://gist.github.com/anonymous/7d1f4f0f189de059472cafa7d8c41e97
(現在好像無法縮網址@@)
麻煩前輩們了 非常感謝
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 111.240.229.188
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1468930647.A.FBE.html
※ 編輯: pppty (111.240.229.188), 07/19/2016 20:23:43
1F：推 Ayukawayen: clearInterval要傳id進去 (setInterval的回傳值) 07/19 21:05
2F：→ Ayukawayen: 沒有傳 就不會把timer停掉 所以應該會有多個timer在跑 07/19 21:06
3F：→ Ayukawayen: 因此觸發timer的頻率就會以倍數增加 猜測是這樣 07/19 21:06
是的 最初在最下面是設了var interval = setInterval(change,3000);
傳到各函式裡面是用clearInterval(interval)的方式去做
不過發現他越跑越快以後 我也越來越慌了@@a
所以說我該把程式內容改回原樣再找別的問題產生點嗎?
現在已經改到不知道該朝哪邊找問題了QQ
※ 編輯: pppty (111.240.229.188), 07/19/2016 22:01:06
4F：推 lostnorth: 建議用 jsfiddle 分享局部程式碼，方便讓幫忙的人預覽 07/19 23:53
5F：→ lostnorth: 及修改 07/19 23:53
6F：推 Ayukawayen: 沒有實測 這樣寫有可能interval被覆寫掉 所以前一個沒 07/20 00:33
7F：→ Ayukawayen: 人去停 一個方法是設個isEnabled變數 滑鼠移進去就設 07/20 00:34
8F：→ Ayukawayen: 去就設為false 移出來就設為true 然後change()裡檢查 07/20 00:34
9F：→ Ayukawayen: 如果isEnabled是false就不做事等下一次 但沒測過 07/20 00:35
10F：推 devil115789: function start(para){var interval=....} 避免覆蓋 07/20 11:32
11F：→ devil115789: 不然就是一個大圖就用一個object實做 07/20 11:33
12F：→ pppty: 第一次貼程式碼 不知道該用哪種分享 不好意思@@a 07/20 16:03
13F：→ pppty: 回家再實測各位大大的建議 如果有問題希望能再向各位請教 07/20 16:04
14F：→ pppty: 感謝 07/20 16:04