轮播图
手写了一个原生 js 和用 react 做的简单轮播图,react 组件的具有一定的复用性。
项目地址:Vanilla Js ,React 版。
基本思路
原生js:
- 实现基本的 HTML 结构
- 实现基本的 CSS 样式,使其具有完整轮播图的样式
- 添加逻辑:自动轮播,点击切换,随图变化的变色圆球,点击圆球切换对应图片,鼠标停留图片时,停止轮播,离开时再继续等
react组件:
- 将图片作为 props 传入组件,组件实现功能和样式
- 目前是用 class 组件写的,相应的方法都写在组件内,大体思路同上。
待解决
react:
- 使用 hook 实现
- 精简代码
- 根据参考,进一步优化