vue 实现走马灯效果

这篇文章主要介绍了vue 实现走马灯效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着www,12346.net来一起学习学习吧

Part.1  问题

在写一个H5页面时遇到一个需求,头部公告需要滚动变换,需要实现一个走马灯效果

Part.2  实现

我的做法:利用 定时器 + CSS3 变换公告数组的顺序 从而实现走马灯效果

Part.3  代码

html

JS

Part.4  注意点

在 js 中我使用的是  setInterval 中 利用 setTimeout 来调用方法

方法详解:

           setInterval  ―― 会不停的调用函数

           setTimeout ―― 只会执行函数一次

这么写的原因:

如果单纯的使用 setInterval 会导致页面卡死,原因与JS引擎线程有关(有兴趣的童鞋可以研究一下),setInterval  不会清除定时器队列,每次重复执行会导致定时器叠加,最终卡死网页。而 setTimeout 是自带清除定时器的

Part.5  效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持www.12346.net。

以上就是vue 实现走马灯效果的详细内容,更多请关注www.12346.net其它相关文章!

声明:有的资源来自网络转载,版权归原作者所有,如有侵犯到您的权益 请一个月内联系我们,我们将配合处理!

原文地址:vue 实现走马灯效果发布于2023-01-25 12:57:01