react/antd -- 讓antd的跑馬燈支持自輪播的時間

官網那邊不能設置輪播的時間，也沒有手動切換案例，下面咱們給他添加一個補丁吧

補丁編寫

代碼以下

/**
 * 
 * @param carousel carousel ref
 * @param carousel_autoplay_time 自定義時間
 */
const init_carousel_autoplay = (carousel: any, carousel_autoplay_time: number) => {
    // 輪播定時器
    var carousel_autoplay_timer: any = null
    // 自動播放
    const carousel_autoplay = () => {
        carousel_autoplay_timer = setTimeout(() => {
            carousel.current.next()
            carousel_autoplay()
        }, carousel_autoplay_time);
    }
    // 清理定時器
    const clear_timeout = (cb: () => void) => {
        if(carousel_autoplay_timer){
            clearTimeout(carousel_autoplay_timer)
            return
        }
        cb && cb()
    }
    // 重置自動播放
    const reset_aotoplay_timer = () => {
        // 清理
        clear_timeout(() => {
            // 繼續輪播
            carousel_autoplay()
        })
    }
    // 輪播上一個
    const carousel_prev = () => {
        reset_aotoplay_timer()
        carousel.current.prev()
    }
    // 輪播下一個
    const carousel_next = () => {
        reset_aotoplay_timer()
        carousel.current.next()
    }
    return {
        carousel_autoplay,
        carousel_prev,
        carousel_next,
        clear_timeout,
    }
}

export default init_carousel_autoplay
複製代碼

使用

使用代碼示例

// 定時輪播時間
const carousel_autoplay_time = 5e3
const { carousel_autoplay, carousel_prev, carousel_next, clear_timeout } = init_carousel_autoplay(carousel, carousel_autoplay_time)
useEffect(() => {
    // 啓動輪播
    carousel_autoplay()
    // 離開清理定時器
    return clear_timeout
}, [])
複製代碼

這裏還有兩個點擊切換上一個和下一個的事件，可直接使用onClick={carousel_prev}

antd沒有手動切換的例子，咱們能夠在外面包一個div，而後下面弄兩個按鈕就能夠了，點擊用上面補丁的函數（使用默認的話，會和自動輪播衝突哦）

完整代碼截圖

其餘

useEffect(f, [])
複製代碼

之因此要用useEffect(f, []), 是由於這樣保證了它只會執行一次。否則每一次渲染都執行一次，無數個定時器出現，那也太恐怖了。 而後之因此要return，是由於要銷燬定時器

發現
經樓下掘友提現，autoplaySpeed 和 autoplay配合也是能夠的哈。（雖然有點bug）

--完--