刚开始写文章,在很多地方上存在着缺陷,考虑的不是很充分,很是抱歉。再加上这几天因为自己的懒惰,没有完成承诺,第二天发js部分的教程。这几天在帮别人弄期末考核小程序,因为我现在还是一名学生,期末到了,接了几个单子帮别人做期末作业。虽然帮别人做作业不好,没办法,生活艰难,学生期间,赚一点点钱不容易,尤其是刚入门的新手程序员。不接单子可以去兼职做别的,确实是可以,但我考虑到时间和自己的个人原因,我选择了靠技术来混饭,不然学这个就白费了。接单子做的同时,我也是在学习小程序,刚开始学小程序,是去蹭课学的。
好啦,废话不说,都说程序员话少,可我怎么觉得自己话好多呀,哈哈哈。接下来开始js的部分吧。
上一篇文章里,写的是html+css的代码,里面没有js代码,看起来和轮播是不是沾不到边,感觉没什么用。如果有这种想法就大错特错了,万丈高楼平地起,没有前面的代码,就没有后面的特效。
一、轮播的小圆点(在上一篇文章里,我漏写了这个部分)
效果图:
html代码部分:
css部分:
ps:如果出现小圆点的位置不对,可能是.banner样式未添加上position: relative; 样式
二、开始编写图片切换的js代码
1、首先添加标签,js代码都写在这个标签里,可以写在里,也可以在结束前书写js代码,我一般习惯性选择第二个写法,这和浏览器的解析顺序有关。
2、给小圆点添加点击事件
给小圆点添加点击事件,点击后会,console.log出当前的i的值,按照常理来说,结果应该是 0, 1, 2, 3,但是在控制台打印出的结果是4,4,4,4。为什么会这样?这和闭包有关。浏览器加载完全部代码后,这时i的值为4,当点击圆点后,打印出来的值,自然是4,而不是按照预想的结果,那么如何打印出预想的结果呢?利用闭包。
将代码改为下面,这是立即执行函数的写法,往函数里传入当前i的值。
为了识别当前点击的圆点是第几个圆点,也可以采用index = i 这种写法,给当前的圆点添加一个标识符。
3、给圆点添加激活状态
ps:代码可以优化,在编写css上,利用css的后代选择器,可以减少很多代码。
4、点击圆点切换相应的图片
(1)去除上一篇中的鼠标移入容器发生图片切换的样式
(2)点击圆点切换图片
第一种写法:
ps:这种写法是直接添加行内样式
第二种写法:
在标签里添加一行代码
ps:第二种方法是直接给style标签里添加内容。
两种写法,我也不知道那种好,好像涉及到浏览器的重绘和回流等性能优化的问题,我觉得第二种写法比较好。第二种方法只需要操作一次dom元素,第一种方法是给每一个banner-iten类名的元素添加样式,需要操作多次dom元素,从性能角度,我觉得第二种好,这只是我的猜想,我也不知道是不是对的,在网上也找不到这方面的解释,学校里也找不到这方面的高手,我是自学前端的,我现在的这个学校,没有专业教前端的专业。
图片切换的事件已经写好了,但此时此刻的方块只有四个,当用户需要100个时呢?难不成一个个css样式去写,这不可能的,工作量太大了,也不合理,这时需要用js来解决。
三、编写js动态生成一定数量的轮播方块
(1)for循环生成num个轮播方块
ps:通过编写一个函数来实现这个功能,num为轮播方块的数量
(2)每个方块的背景图片的定位
去除css代码里关于.banner-item:nth-child(*) .banner-cube的背景图片定位的样式,效果应该一样的。
(3)设置每个方块的宽度
(4)设置每个方块的动画切换时间
ps:(0.5 / num * i) 是一个计算技巧,会使所有的方块切换在.5秒内切换完毕
(5)解决后面部分方块的层级问题
js代码解决方案:
到此基本上,点击圆点切换图片的功能已经写好了
全部代码:
定时切换和左右箭头点击切换的功能的原理都一样,在这里就不写了,上面的代码简化写法,例如在圆点的样式那里使用css的后代选择器的写法。这些就不一一写了,可以自行简化。
简化后的版本:
总结:写了几个小时才写好,中途有跑去做了别的事情,第一次写,有很多不足的地方,写的不是很简单明了,还望见谅。js部分的讲解有种力不从心的感觉,我还是平时总结的少,缺乏这方面的经验,但我会坚持下去,不断的进步。
谢谢你们的观看,你们的点击是我坚持的动力!
领取专属 10元无门槛券
私享最新 技术干货