无限轮播的动效优化

引言

在现代网页设计中，动效不仅能增强用户体验，还能使页面更加生动有趣。今天我们要讨论的是如何优化一个无限轮播（Carousel）效果，具体来说，我们希望通过鼠标悬停改变轮播速度，并且避免一些常见的视觉问题。

问题描述

当用户悬停在轮播的左侧区域时，我们希望圆圈（代表轮播项）移动得更快。然而，原始的实现方法会导致一些奇怪的视觉现象：当鼠标悬停时，看起来像是有一组圆圈在加速移动，而另一组则保持原速。当鼠标移出时，效果反转。这种现象不仅影响用户体验，也让设计看起来不专业。

原始代码分析

以下是原始的HTML和JavaScript代码：

<nav class="moving-circles">