[JavaScript]記錄完成輪播過程中的幾個點

來源:互聯網
上載者:User

標籤:href   lis   val   enter   綁定   需要   web   int   過程   

記錄幾個坑

之前的輪播:

完整代碼:GitHub

效果預覽:GitHub

最近完成的輪播:

完整代碼:GitHub

效果預覽:GitHub

在完成輪播中解決兩個問題:

1.setInterval()會和按鈕綁定的事件發生衝突。

表現為:setInterval()設定了每3S輪播一次,在沒有任何動作幹擾的情況下,輪播正常;但是當需要點擊按鈕跳轉到其他圖片時,從點擊按鈕到圖片跳轉成功的這段時間,假設是1S,也會計算到setInterval()設定的時間中;即從A1到A2需要3S,在A1到A2的過程中2.5S時,我們點擊A3,他就不會在A3上停留3S再輪播,而是從A3到A4隻需要0.5S(3-2.5)。

解決辦法:給輪播組件添加監聽事件,一旦滑鼠移入組件範圍,輪播停止;滑鼠移出,輪播繼續。這樣就能保證每一張圖片到下一張圖片都需要3S的時間。

$(‘#slidesWrapper‘).on(‘mouseenter‘,function(){    window.clearInterval(timerId)})// 當滑鼠移出$(‘#slidesWrapper‘).on(‘mouseleave‘,function(){    timerId = setTimer()})

2.輪播絮亂

表現為:一旦瀏覽器離開輪播的tab,跳轉到其他的tab後過一段時間再回來,輪播的速度會加快。

解決方案:給document添加visibilitychange事件。

MDN

瀏覽器標籤頁被隱藏或顯示的時候會觸發visibilitychange事件.

我們只要判斷:如果標籤頁被隱藏,則輪播停止;標籤頁被顯示,輪播繼續,就可以解決這個問題了。

如:

document.addEventListener(‘visibilitychange‘,function(e){    if(document.hidden){        window.clearInterval(timerId)    }else{        timerId = setTimer()        console.log(2)    }})

[JavaScript]記錄完成輪播過程中的幾個點

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.