The problem of automatic rotation based on vue

as shown in the picture below, I want to make an automatic broadcast smile, but I can"t do it. I"d like to ask the god for advice.
as shown in figure 1, automatic rotation from right to left stops when the mouse is over and starts when the mouse leaves. What should I do? Can
provide the following detailed code? Thank you
1 figure 1

Mar.06,2021

The principle of

broadcast is actually to move your dom position, and then make the visible invisible and invisible visible, where you can choose to change your list of left or use transform: translateX to implement
1. Pure css: to write animation animation, constantly change the translateX and then set the animation-play-state pause pause when hover. The idea is that it may be possible, but it may not be easy to manipulate the details

2. Use js to write a setTimeout or raf that constantly changes the translateX, and then binds the onmouseenter onmouseleave event, sets a flag, or removes the timing and turns on the timing directly in two times.

this is probably the way of thinking. The specific details certainly need to be polished. You can take a look at the source code of many rotated maps on the Internet and refer to

.
Menu