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

摘要

面试时，面试官要求设计并实现一个图片轮播 组件 说出html/css/js的设计思路

要求有自动切换、手动切换上一个面板、下一个面板、指示器提示和点击切换、渐隐切换效果

当时回答用定时器、css过渡实现，面试完自己上手写了些，做了一些优化，也学到了很多。

样式

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

demo功能

设计一个轮换图组件。过渡效果为显示隐藏。

要有底下控制条与左右前进回退按键。本demo控制按键仅在时显示。

主要实现方式

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

<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?ri