首頁猿問 vue實現(xiàn)自動輪播的問題

vue實現(xiàn)自動輪播的問題

JavaScript

牧羊人nacy 2019-03-14 18:15:30

如下圖，我想做成一個自動輪播的笑過，但是不會做，想請教大神一下。如圖1，從右向左自動輪播，當(dāng)鼠標(biāo)放到上面的時候就停止輪播，鼠標(biāo)離開的時候開始輪播，這個應(yīng)該怎么做？能提供以下詳細(xì)的代碼嗎？多謝

查看完整描述

1 回答

DIEA

TA貢獻(xiàn)1820條經(jīng)驗獲得超3個贊

輪播的原理其實就是移動你dom的位置，然后讓可見的不可見，不可見的可見，其中你可以選用改變你這個列表的left或者用transform: translateX 來實現(xiàn)
1.純css: 寫animation動畫唄，不斷改變translateX 然后hover的時候設(shè)置animation-play-state pause暫停。思路是這樣可能但是可能不是很好操控細(xì)節(jié)

2.用js 寫一個setTimeout或者raf之類不斷改變translateX,然后綁定onmouseenter onmouseleave事件，設(shè)置一個flag，或者直接在兩個時間里面移除定時和開啟定時。

思路大概就是這樣吧，具體細(xì)節(jié)肯定還是有需要打磨的，可以看一下網(wǎng)上很多輪播圖的源碼參考一下

反對回復(fù) 2019-03-29