jQuery定时切换显示效果
定时显示的 div 切换，是不少前端页面的小亮点，像轮播图、提示条、通知弹窗都能用上。这个方案用的是 jQuery 配合setInterval，逻辑清晰、代码量也不多，比较适合快速实现需求。
HTML 部分先摆好几个div，比如：提示 1、提示 2、提示 3，后面两个默认display: none就行。CSS 不复杂，主要控制下位置和初始状态。
jQuery引入之后，核心逻辑就靠setInterval轮流显示这些div。每次先fadeOut当前的，再fadeIn下一个，2 秒切一次，效果还挺自然的。
你可以自己调整下切换速度、动画时长，想加暂停、继续按钮也不难，用clearInterval和setInterval就能搞定。
需要注意的是，别在页面元素太多时频繁切换，会有点卡。要是你项目里已经用了 Vue 或者 React，那这种轮播逻辑建议直接交给组件或者状态管理来搞，性能和可维护性都会更好。
不熟 jQuery 的同学，也可以顺手看看这几篇相关文章，了解下定时器的用法和坑：
如果你想快速给页面加点“节奏感”，这种定时出现 div 的小技巧，还是蛮实用的～
文件大小：708.14KB
评论区