轮播图

手写了一个原生 js 和用 react 做的简单轮播图,react 组件的具有一定的复用性。

项目地址:Vanilla Js ,React 版

基本思路

原生js:

  • 实现基本的 HTML 结构
  • 实现基本的 CSS 样式,使其具有完整轮播图的样式
  • 添加逻辑:自动轮播,点击切换,随图变化的变色圆球,点击圆球切换对应图片,鼠标停留图片时,停止轮播,离开时再继续等

react组件:

  • 将图片作为 props 传入组件,组件实现功能和样式
  • 目前是用 class 组件写的,相应的方法都写在组件内,大体思路同上。

待解决

react:

  • 使用 hook 实现
  • 精简代码
  • 根据参考,进一步优化

参考链接