轮播图：小米官网同款轮播图，拿走它让你的网页酷酷的～

下面是我闲暇时总结的JS、CSS、算法总结，欢迎大家点赞、star～～

• 有趣实用的CSS效果
• 前端博客 传送门
• LeetCode个人题解 传送门

最近一直再看基础知识，打算将基础知识与实力结合起来，第一个要写的就是轮播图，他的难度不算高，对我可以提升对各种方法的使用，锻炼动手能力。

那么为了强化我的记忆，我将详细的过程写在博客中，希望对大家有所帮助。

第一步，将小米官网上轮播图的几张图片保存下来~

进图官网，在图片上右键，点击检查

双击img之后的地址，并在新网页中打开，怎么保存我就不用多说了吧~

第二步，写代码（html+css）

在任意编辑器上都可以，我到目前一直用的都是vscode，轻量级，插件多很方便。

在这里先做分析，一个完成的轮播图大致分为三部分。

1.图片部分。
2.左右按钮，分别对有向左滑，向右滑。
3.右下角对应是第几张图片的小点。

三部分相互独立，没有关联，我们一个一个解析~

第一部分

图片部分

具体的样式布局我会在最后贴出，我相信大家一看就会明白。
写好了图片，此时的图片是一个一个往下排的，我们需要让他们叠在一起。

这里我们就需要了解什么事文档流
文档的默认排列规则，就叫文档流，字面意思，文字图片等等是不会叠加的。
所以我们要违背这个原则，他又叫脱离文档流。自己建立一个新的规则，不影响在文档流中的其他元素

注意：这里有两种方法去实现
定位 （绝对absolute 相对relative 静态static 固定fixed） 绝对和固定可以完全脱离文档流。如果你的元素不受滚动条的影响，就用固定定位。
浮动 （并没有完全脱离）

效果图太大就不贴上来了，当我们图片处理完后，下一步就是左右按钮。

第二部分

左右按钮部分
我在网上截了两张图片，
很随意，我们设置他的样式，在这里加了一个小技巧，其实没有任何难度。
当我们鼠标放上去的时候，出了 cursor: pointer; 我们还可以将她的透明度设置为0.5，即 opacity:0.5; 这样可以让变化更明显。

请注意，我们仍然需要给左右两个按钮设置绝对定位，否则，他们会被遮盖住

右边也是如此，话不多说。

第三部分

右下角按钮部分

---

接着昨天晚上的写~

右下脚按钮也是很简单的，说实话我个人非常喜欢html+css这一部分，他并不难，但是想要做出绚丽的效果，这需要功夫，我自己的功夫还不是很到位，在这里就不多说了。

对应五张图片，所有我们写也写五个

其对应的css样式呢也不难，思路1.将其放置在整体的右下角 2.将五个点左浮动 3.五个点的鼠标效果~

到这里所有的布局就结束了，下面大概写一下js的代码（这里原生js和jq做到的轮播效果一样，他们原理也很相似，虽然我对jq了解不深，但它胜在简单易懂，这里我用jq来实现这个功能）。

第三步、写代码（JQ）

首先，我们需要将除了第一张图片以外的其他图片进行隐藏，同时，当图片处于第一张的时候，右下角的圆点也要显示为被选中的状态。

1.隐藏图片 找到包含图片的模块 加一条 display：none；
2.在html文件中，找到第一张图片，给他加一条行内属性 style = “display：none；”
3.找到第一个圆点，为它加一个被选中的样式，样式和鼠标滑过样式相同；

接下来的思路就：
1.图片的 显示方式 会传递到下一张图片上
2.圆点也同理，圆点的样式也会传递到下一个原点。
3.鼠标点击哪个圆点，就会显示对应的图片（优先级高）
思路往后会有很多延伸，我就不细说了

那么请看下面代码，我在代码中有写代码的意义，
这里是，小按钮对应滑动图片的代码

这是我第二次见到JQ代码，但这不影响我去理解它，甚至去使用它。 全面的代码我会放在github上请大家注意~

这里是右按钮对应的效果

在这里我留下个小悬念，那么就是左按钮如何写呢？我们一起思考。

最后一步，我们需要给整个轮播图加一个定时器，在没有接触前我感觉这一步应该是最难得，当写出来后，我发现他并不难，只要你的思路清晰。

首先我们给他加一个定时器 setInterval （函数 ， 时间间隔“毫秒”）
重复 我们要做的函数，并且设置重复的时间，而我们这个轮播，所要做的就是重复向下一张图片切换，即向右切换。
到这里轮播图大概就是全部完成了，具体效果已经代码都在github上~~
预览地址
这是代码