前端Demo -- 轮播图

前端Demo – 轮播图

源码在：https://gitee.com/jimmyxuexue/excellent_interface/tree/master/%E8%BD%AE%E6%92%AD%E5%9B%BE
思路：有几张图就放几个DIV，将所有的div的透明度都调整为0，在需要显示的div单独添加透明度为1的一个类，我们再使用JS动态的根据情况来动态的添加和删除这个类就可以实现轮播图的功能啦~


我还做了一个响应式哈哈~

HTML部分

HTML部分就是很常规的布局结构，没有难点

CSS部分

当我们要给添加了opeacty为1的元素子元素设置动画时，只要使用子元素选择器选择哪个子元素再添加样式即可，这样只要是这个动态改变的类再改变，拥有这个动态属性的子元素也会一起跟着改变
使用@media 来判断浏览器窗口的宽度，max-width：600表示的是最大宽度为600px的时候要执行的代码，我们再这个选择器里面再设置要做的响应式改变即可

JAVASCRIPT部分

这个轮播功能的最关键的部分是，我们要知道dom的操作的获取前兄弟和后兄弟的操作，分别是dom.previousElementSibling 和 dom.nextElementSibling就是分别获取前兄弟和后兄弟，返回的结果是一个布尔值，我们再根据这个来动态的为背景的dom获取添加类来实现轮播的效果
当点击按钮的时候，我们要让定时器重新开始计算时间， 不然会出现切换到下一个以后立刻就再次切换，这个不是我们想要的效果。

这个就是这个渐变轮播图，主要就是运用到CSS的透明度属性