做一个有温度和有干货的技术分享作者 —— Qborfy
前言
循环轮播图,基本上大家用的都是现有组件,如果要让你自己设计实现一个,其实最主要的两个点:循环算法和滚动动画
手写难度:⭐️⭐️
涉及知识点:
- 循环播放的思路
- CSS 动画,transtion和 transform
- Web Component 自定义组件
轮播图
大家最常用的轮播图基本上就是 swiper.js,不仅适配 PC 端和移动端,同时包含多种实际应用场景。但是目前我们只需要实现其中一种场景即可——循环轮播图,大概示例图如下:
1 | <swiper-container speed="500" loop="true"> |
大概效果如下:
实现思路
在研究实现思路前,我们先确定一下要实现的目标,如下:
- 采用
Web Component
去实现两个自定义标签<swiper-container>
<swiper-slide>
<swiper-container>
标签支持属性配置,如:speed
loop
实现思路如下:
<swiper-container>
容器为 flex 容器,里面包含一个wrapper
容器用于装载所有的<swiper-slide>
<swiper-slide>
采用横向布局,当切换下一个的时候,使用transform:translate(x,y)
将wrapper
向左移动进行展示下一个slide
- 当
loop
为 true的时候,支持循环播放- 循环播放逻辑为,在最后一个
<swiper-slide>
后面复制第一个<swiper-slide>
- 当最后一个继续点击next的时候,会把复制第一个展示
- 当第一个(复制)展示后,点击下一步的时候,取消动画效果,将
wrapper
位置移动到第一个 - 然后利用
setTimeout(0)
延时执行,增加动画动画效果,将wrapper
位置移动到第二个
- 循环播放逻辑为,在最后一个
为了更好理解循环动画思路,为了更好的展示效果,我将container
取消了overflow:hidden
,具体动画如下:
整个轮播图的 DOM 结构如下:
代码实践
我们将通过Web Component
规范去定义上述两个组件,分别是<swiper-container>
和<swiper-slide>
Swiper-Container组件
Swiper-Container
负责实现容器和控制轮播图滚动事件,等于是整个轮播图的核心,具体代码划分如下:
1 | <template id="swiper-container"> |
要是不想看代码,可以看这里的方法简要说明:
init
初始化函数,用了 setTimeout去解决 slot的异步渲染问题,获取一些 dom 节点- 其中需要判断是否循环loop,如果需要则需要复制第一个节点到最后
cloneFirstSlide
- 其中需要判断是否循环loop,如果需要则需要复制第一个节点到最后
bindEvents
绑定 prev、next、pagination等 dom 的 click事件nextSlide
和prevSlide
指的是跳转到下一个节点和上一个节点所需要执行的函数,- 其中
nextSlide
函数需要在最后一个节点判断当前是否为 loop,如果 loop为 true,则需要停止动画,同时将 wrapper 容器的 transform 迁移到第一个节点
- 其中
goToSlide
用执行当前需要展示哪个 slidesetActivePagination
用执行判断 哪个 pagination需要展示高亮样式
Swiper-Slide组件
swiper-slide
组件实现起来就很简单,只需要满足样式展示即可,不过有一点需要注意,就是由于swiper-container
是flex布局,所以需要设置swiper-slide
的样式不允许缩放flex-shrink: 0;
,完整代码如下:
1 | /** |
本文所有代码都已放到100道前端精品面试题,中的前端面试100道手写题(7)—— 循环轮播图,如果有帮助到你,可以帮忙给个star 即可。
参考资料
- 本文作者: Qborfy
- 本文链接: https://www.qborfy.com/face100/7-loop-pic.html
- 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!