Question

在Slick滑块中，我使用以下配置 https://kenwheeler.github.io/slick/

autoplay: true, autoplaySpeed: 6000, pauseOnHover: true, pauseOnFocus: true, pauseOnDotsHover: true, 在这里，当我们将鼠标悬停在横幅上时，暂停并再次离开鼠标时，计时器将再次运行 6000ms 并移至下一张幻灯片。

我需要

如果我们将鼠标悬停在 3rd秒上，并保持几秒钟然后离开，剩下的 3秒仅应停止播放下一张幻灯片。请如何在光滑的滑块中实现此目标。

Answer 1

最后完成了光滑的幻灯片

我们需要考虑鼠标的进出时间，并计算剩余时间（如果用户进行了鼠标进出操作，即使在多个时间中也是如此）

光滑的幻灯片中有一个选项， afterChange 和初始化

    init: () => {
      setSliderInitialized(true)
      addTimeStamp()
    },
    afterChange: index => {
      setCurrentSlide(index)
      setAutoplaySpeed(parseInt(props.timer)) // props.timer is pause time which is from JSON
      //setAutoplaySpeed(6000) -  6 sec  
      setTimeStamps([new Date()])
    },

并且必须考虑鼠标的进出时间，为此 React 可以导入 useEffect

import React, { useEffect, useRef, useState } from "react"

  const slider = useRef()
  const [hovered, setHovered] = useState(false)
  const previousHovered = usePrevious(hovered)
  const [currentSlide, setCurrentSlide] = useState(-1)
  const [autoplaySpeed, setAutoplaySpeed] = useState(parseInt(props.timer))
  const [timeStamps, setTimeStamps] = useState([])
  const [sliderInitialized, setSliderInitialized] = useState(false)

  const addTimeStamp = () => setTimeStamps([...timeStamps, new Date()])

需要使用时间戳

    const getElapsedTime = () => {
    let elapsedTime = 0

    for (let i = 0; i < timeStamps.length; i += 2) {
      const start = timeStamps[i]
      const stop = timeStamps[i + 1]
      elapsedTime += stop - start
    }

    return elapsedTime
  }

  useEffect(() => {
    if (previousHovered === false && hovered === true) {
      addTimeStamp()
    }

    if (previousHovered === true && hovered === false) {
      addTimeStamp()
      const elapsedTime = getElapsedTime()
      let remainingTime = parseInt(props.timer) - elapsedTime  // props.timer - 6000ms
      setAutoplaySpeed(remainingTime ? remainingTime : parseInt(props.timer))
    }
}, [hovered])

当滑块初始化(init)并更改afterChange时-通过计时器。

当鼠标悬停存储当前时间，而鼠标悬停将时间存储在**array**

通过迭代数组并减去，我们可以获得elapsedTime。并且我们需要将暂停时间从6000毫秒更改为经过的时间。当滑块再次更改时，我们需要设置6000ms。

光滑的滑块-悬停时暂停，鼠标离开时播放剩余的几秒钟

1 个答案: