如何用原生JS实现长尾词形式的轮播图动画效果？

本文共计1298个文字，预计阅读时间需要6分钟。

原生JS实现轮播图+基本原理：通过控制包含n张图片的ul的left值来实现图片自动滚动的效果，其中列表中li元素的个数与n相等，第一个li和最后一个li里存放的图片应为同一张图片。当**按钮被点击时，实现轮播图的功能。

原生JS运动实现轮播图

**基本原理：**通过控制包含n张图片的ul的left值来实现图片自动运动的效果，其中列表中li元素的个数为n，第一个li和最后一个li里存放的图片应为同一张图片，当图片运动到最后一张时，将ul的left值设为0，即可达到图片无线轮播的效果。

运动函数的实现

函数需传入元素（即需要参与运动的元素）、目标值（以对象的形式呈现，如{left: 300}）、callback（回调函数）。