CSS实现轮播图和侧拉单效果

一、侧拉单

原理：利用鼠标移入hover后显示出之前隐藏好的盒子

首先，先写好一个盒子，一般用li多一些，然后去写一个当鼠标移入li后的隐藏盒子，我们为了让侧拉单出现在相对于鼠标移入的某个位置，所以这里要用到绝对定位，而根据子绝父相原则，li要有一个相对定位，然后要隐藏的盒子绝对定位，具体位置可以在浏览器调试工具中慢慢调试，找到理想水平即可，如果侧拉单内子元素还需要定位的话，可以单独给侧拉单一个父盒子，仅仅用来绝对定位（套娃）然后侧拉单内的内容根据情况布局实现即可，display：none必不可少，鼠标移到侧拉单时hover内写一个display：block即可，其他动画效果根据需要锦上添花

二、轮播图

原理：所谓的轮播图，其实就是多张图片按照一定的时间和顺序依次从某个窗口来向用户展示，这就类似于舞台剧表演，支撑轮播图的内容进行展示的元素就相当于舞台，而轮播图展示的内容就是各个演员的表演，图片存储的地方就相当于舞台后边的演员准备区。

舞台的大小就是每张图片的大小，演员准备区就是所有图片宽度加起来的总和

因为舞台让一个人表演，所以添加overflow：hidden让准备区的人不被看见，只能看见舞台上的人，然后添加入场动画，让图片座椅或右移，添加关键帧调整，有一个细节是在滚动到最后一张图片后会直接跳到第一张，先的僵硬。解决方案：在最后一张图片后加上第一张图片，然后在加上一个关键帧，就可以实现无限轮播的效果