高仿京东首页,效果图见最后,跟随慕课网视频所学。效果图见最后。
重点功能:
- 分类导航栏
- 轮播图
不会在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
当鼠标快速划过许多一级菜单时,应该只显示最后一个停留的以及菜单的二级菜单,因此需要进行防抖优化。
效果图
分类导航图
轮播图