跟着慕课网学习的高仿京东首页

高仿京东首页，效果图见最后，跟随慕课网视频所学。效果图见最后。

重点功能：

1. 分类导航栏
2. 轮播图

不会在CSDN上上传资源，只好https://github.com/yujiang312/jd.git

图片显示不出来的话是因为我用的都是在线的地址，所以要启动本地服务，我用的是browser-sync，可以参考https://blog.csdn.net/weixin_42349231/article/details/105956739

笔记：

一、轮播图

轮播图逻辑

轮播图由多个图片组成，多个图片对应一个ul中的多个li，将li变成一行放置，但是只有一个图片处于显示位置可以显示，通过控制整个ul的left来实现轮播图的切换。 如果点击 > ，说明要显示左边的图片，说明ul应该向左移，即left为负，并且变小即可。 反之点击 < ，说明要显示右边的图片，ul向右移，left变大。

轮播图边界优化：

tip1:

将第一张图片左边插入第五张图片，第五张图片右边插入第一张图片，为了使轮播图在边界时仍可以切换顺畅。
那么轮播图的left一开始就要设置为负的一张图片的宽度才能保证显示的是索引为1的图片了。

tip2:

切换到边界值时，比如目前处于第1张图，点击 > ，则要显示第5张图，由于我们事先已经copy了第五张图在左边了，所以可以顺利显示，但是也要同时
改变当前的索引值为最后一个图片。

图片切换的滑动效果

滑动的时候是滑动了一张图片的距离，将这一张图片的距离假设划分为十等份，每段小距离都处于一个动画的过程中，那么整体就是一个滑动的效果了。

tip1

此处利用serInterval来设置动画，比如10等份，就需要滑动10下才能滑完所有距离。

tip2

滑动的动画也要考虑边界值：setInterval是持续不断的间隔一段时间执行动画，所以需要考虑动画停止的条件，即当ul的left到达目标位移，
或者处于第10次短距离滑动了，也就是最后一次短距离滑动了，那么就需要考虑清空clearInterval
当然，如果不想要缓慢的滑动效果，想要直接切换图片，可以直接点击切换按钮，改变ul的left值。

动态生成小圆点

小圆点的数量就是图片的数量，通过createDocumentFragment()生成片段，循环图片长度，appendChild插入其中，同时每个小圆点绑定index属性

tip1

由于默认显示的是第一张图片，所以也要默认为第一个小圆点增加active类

tip2

点击不同的小圆点对应不同的图片，也是通过点击的目标索引与之前的索引值计算得到偏移距离，控制ul的left来实现切换的

其他一些使用体验优化

tip1

默认不点击任何按钮的时候，图片也是定时切换的：可以通过设置定时器，不断的增加点击 > 的事件

tip2

鼠标悬浮在图片上时，该图片就不可以切换了，而要一直显示该图片。或者当该图片正在处于切换过程中时，切换完成就不能动了。这里需要将鼠标悬浮动作之后
将动画的interval给清除，等到mouseleave后再给增加上

二、分类导航图

鼠标悬浮侧边主菜单，显示对应的二级菜单

逻辑

首先提前为二级菜单写好active显示的类，但是没有绑定到html的标签上。当鼠标悬浮在某个主菜单时，首先遍历所有的二级菜单，清空其active类（不管其有没有），
然后为当前点击的主菜单的二级菜单增加active类

优化tip

鼠标滑动的过程中，需要让二级菜单多显示一段时间才能符合用户体验需求，所以使用setTimeout，当200ms之后再remove所有二级菜单的active，增加当前菜单的active

防抖tip

当鼠标快速划过许多一级菜单时，应该只显示最后一个停留的以及菜单的二级菜单，因此需要进行防抖优化。

效果图

分类导航图

轮播图