js实现轮播图组件-显隐切换

摘要

面试时，面试官要求设计并实现一个图片轮播 Carousel 组件 说出html/css/js的设计思路
要求有自动切换、手动切换上一个面板、下一个面板、指示器提示和点击切换、渐隐切换效果
当时回答用定时器、css过渡实现，面试完自己上手写了些，做了一些优化，也学到了很多。

样式

（注：图片来源自网络，仅做学习用，侵删）

demo功能

设计一个轮换图组件。过渡效果为显示隐藏。
要有底下控制条与左右前进回退按键。本demo控制按键仅在moveover时显示。

主要实现方式

实现轮播图并不复杂，显隐效果控制opacity，移动效果可以以移动的方式实现。但是如何设计组件的结构与功能是很重要的。本demo的html结构参考自swiper组件。

<div class="carouse-container">
        
        <div class="carouse-wrapper">
            <div class="carouse-slide">
                
                <img src="https://tse1-mm.cn.bing.net/th/id/R-C.9d5f38110d81bc1d31a501a3a23b08c4?rik=GZJrYAMlI58qFg&riu=http%3a%2f%2fpic43.nipic.com%2f20140702%2f13185066_230045958000_2.jpg&ehk=hNqf1udELf6kLPYK%2fsGqVScr%2fOr0tQPq3YEgqJ7Wnn0%3d&risl=&pid=ImgRaw" alt="">
            div>
            <div class="carouse-slide">
                
                <img src="https://tse1-mm.cn.bing.net/th/id/R-C.e2c81c4d639298b18fd9b9ad7b31a089?rik=RJ3PYq4umkWK%2bA&riu=http%3a%2f%2fpic38.nipic.com%2f20140212%2f17982519_160943482175_2.jpg&ehk=BgFQpZUZjnlmSWTiTFuwAY1RREinippMoCNle3w9eMc%3d&risl=&pid=ImgRaw" alt="">
            div>
            <div class="carouse-slide">
                
                <img src="https://tse1-mm.cn.bing.net/th/id/R-C.ec3918caa881de429582261736ddc494?rik=MFLQJdj%2bHYDJhg&riu=http%3a%2f%2fpic180.nipic.com%2ffile%2f20180906%2f24787180_102005141081_2.jpg&ehk=5DYmfWe8oRxZbuBIPSeKN3fGea%2bcf%2fIG0VExnS23Eao%3d&risl=&pid=ImgRaw" alt="">
            div>
            <div class="carouse-slide">
                
                <img src="https://tse1-mm.cn.bing.net/th/id/R-C.d34be9bd62d8653c463e723ec8368d2b?rik=FUbEDMo6GBTgYw&riu=http%3a%2f%2fpic26.nipic.com%2f20130105%2f10613427_140325007000_2.jpg&ehk=t4QtbSo6eb6uxTH0o8GVd09Kfvc%2ba6uS%2br0Pi%2fquMd8%3d&risl=&pid=ImgRaw" alt="">
            div>
        div>
        
        <div class="carouse-pagination">div>
        
        <div class="carouse-btn-next">div>
        
    div>

js中实现对子节点的统计与事件监听。
swiper封装在类中，调用类内函数。
css使用功能类，以类控制功能

// Swiper 构造函数 
// 组件要有足够的自由度，loop让用户选择是否自动滚动，wait表示图片停留时间（包含显隐过渡）
    constructor(loop = true, wait = 3000) {
        this._loop = loop; // 是否自动滚动
        this._wait = wait; // 图片展示时间
        this.interval = null;
        this.sliderLs = [];
        this.pageLs = null;
        this._nowItem = 0;//指向要展示的值
        this.hasPagination = false;
    }
   

过程中遇见的问题与解决方式

1.作为组件，可复用性必须要好。如果需要改变轮播图大小，只需改变carouse-container类。
2.鉴于曾经遇见过chrome的interval问题，需要监听页面显隐，重置定时器。
3.希望打开页面时，首图直接显示在页面上，而后才进行自动切换（loop=true时），首张显示不应该有过渡效果。解决方式时将transition抽象出来，后来以add class 的形式添加。
4.网络图片大，加载慢。用带async属性的script标签，用image请求，实现预加载。担心显示也可在container中设置background-image放置模糊图片。

源码

ShenMu-X github 的 CarouselComp 项目。有需自取。

总结

往常笔者写功能组件，为方便控制，如果使用原生JS写，常常是直接使用js进行dom操作，将变化量抽象为代码中的变量。但事实上应该充分利用html与js的查询操作。对html进行设计，功能扩展性显然更好。可以实现按需使用，例如分页器（底部控制栏），如控制图片前进后退的按钮，都可实现需要时使用，不需要时删除。
设计难度不大，从中学到了不少东西。功能逻辑注释在代码中了。
应该也可以使用css animation加step实现。