html 轮播_如何用原生JS实现3D轮播效果？

用原生JS实现3D轮播效果

实现思路：

1. 先实现无缝轮播效果
2. 添加3D效果
3. 完善代码
4. 增加自动轮播效果

效果如下：

视图中显示3张图片，并通过CSS的透视和旋转实现3D效果，当无任何操作时，图片自动循环轮播。当鼠标划到轮播图时，则停止轮播，滑出时继续自动轮播，此效果通过触发mouseenter和mouseleave事件和计时器来实现。当鼠标在轮播图上向左右滑动时，根据方向轮播下一站或上一张图片，通过触发mousedown和mouseup事件时，的鼠标的clientX来判断方向。

无缝轮播思路

视图中都会显示3张图片，当我们轮播到最后一张图片时，我们该怎么办呢？？？

我的思路：

如果要达到循环轮播效果，那么最后一张图片结束后，我们就应该继续轮播第一张图片，当最后一张图片为视图中的最左侧的图片时则视图中显示的图片应当是最后一张、第一张和第二张图片，为了能让这三张图片组合到一起，所以我在最后添加了第一张图片和第二张图片，当继续轮播时，则从正方向的第一张和第二张图片开始（相当于我们开到的是倒数的两张，但轮播时是正数的两张开始），如果是逆向轮播，则看到的是正序的前两张，轮播时从倒序轮播。

思路图大致如下：

用一句话就是：正序的0、1与逆序的0、1进行偷梁换柱，达到循环轮播效果。

代码

HTML部分：

CSS部分

JS部分

在实现过程中可能会遇到一些问题，我遇到的都体现在代码注释里面啦。

总结一下：

在开始的时候我为了简单化问题，于是我是只用了几个div进行轮播，当基本上实现无缝轮播的时候，我在另一个文件中进行图片的3D效果测试（我也刚接触前端不久，对CSS3的动画掌握也不太熟练），当觉得两个效果都差不多时再合并代码，将图片的3D效果添加到轮播图中。合并后，也出现了一个问题，比如当轮播到最后一张后继续正向轮播和到第一张后要逆向轮播时，偷梁换柱的过程中，会出现轮播效果和前一次相同方向轮播的效果不一致的问题。关于这一点，我被自己绕了很久，当后面想通后，也就清晰明了了。出现这个问题的原因是因为我在代码实现的过程中，将正序的0、1和逆序的0、1独立化了，而它们本不应该相互独立，如果独立了，它们就存在className不一致的问题，那么它们在轮播前的一次状态就不一样，那么效果的呈现也就不一样了，于是出现了updateClassName方法，当修改每个slide的className时，不管是正序01或是倒叙的，其正序的0与倒叙的0、正序的1和倒叙的1的className都要更新为最新的className,才能达到做好偷梁换柱。

除此之外，也遇到没有记住的小问题：

1. 为什么将margin和padding设置为0后，容器之间还有间隙？

容器之间存在空格字符或换行符，都视为一个空格字符，这个字符也有大小，也就是我们所见的间隙，将其父容器的font-size设为0则可以解决。

2. mouseup触发一次后失效的问题：

当mousedown触发后，可能会触发浏览器的默认事件，在mousedown的回调函数中使用e.preventDefault()禁止触发默认事件就可以。

最后

我把代码放到仓库啦，代码还有待完善的空间，请各位多多指教：
链接: 代码.

————————————————

版权声明：本文为CSDN博主「略略略_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：

用原生JS实现3D轮播效果_Z__XY_的博客-CSDN博客​blog.csdn.net