组件产生
最近遇到一个需求，项目首页banner轮播，开始是直接使用element3.0的el-carousel走马灯效果，但是产品觉得切换太快，给用户的体验效果不好，经过多次修改产品给出切换的具体描述前一张图渐隐一个效果，后一张图渐显一个效果，然后停留几秒，于是单独写了一个banner轮播组件。
组件封装思路
主要内容：
①组件图片切换有三种方式，第一种是图片两边按钮切换，第二种是点击图片下方小横条切换，第三种是自动切换；
②子组件props的属性：listBanner（播放的图片源）、interval（图片播放的间隔时间）、 autoSwitc（是否自动播放banner）、 setHeight（banner的高度）；
③给切换图片的标签添加ref，改变ref属性中的opacity，切换透明度，达到图片渐隐渐显的效果，再给对应标签样式中添加transition-duration: 1.5s；（图片透明
//上一张和下一张图片透明度切换 const changePicture = (num) => { for (let i of rotationRef.value) { i.style.opacity = "0";//所有的图片透明度设置为0 } //调用该方法的时候传入对应图片的索引，该图片赋透明度为1 if (rotationRef.value.length !== 0) { rotationRef.value[num].style.opacity = "1"; } };
度切换的时间
组件思路 ①图片源是数组形式，首先用v-for遍历图片源数组，让图片先平铺到页面中 ②实现点击左右两边按钮切换图片，点击右边按钮，图片switchIndex++（图片的索引）累加，点击左边按钮switchIndex–累减；从右边切换图片已经遍历完的时候，switchIndex赋值为0（第一张图片的索引），从头开始播放；从左边切换时，切换到图片switchIndex等于-1的时候，switchIndex赋值为图片源数组的长度-1（最后一张图片的索引）从最后一张图片播放。 ③定时器切换图片，先写一个定时器，默认停留时间为4000ms，在定时器中调用右边切换的方法，因为定时器是顺时针播放图片的。onMounted中调用定时器方法，在 onUnmounted中要记得销毁定时器，不然会出现一些奇怪的问题。 ④小横条切换图片，根据图片源数组的长度循环显示小横条，点击小横条的时候传入对应横条的索引，把这个索引赋值到对应切换图片的方法中，就会显示对应的索引的图片。 ⑤鼠标停留mouseenter在图片上停止自动播放，鼠标离开mouseleave图片自动播放。停留的时候调用
