前端:3D立方体旋转轮播图特效(下)

刚开始写文章,在很多地方上存在着缺陷,考虑的不是很充分,很是抱歉。再加上这几天因为自己的懒惰,没有完成承诺,第二天发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部分的讲解有种力不从心的感觉,我还是平时总结的少,缺乏这方面的经验,但我会坚持下去,不断的进步。

谢谢你们的观看,你们的点击是我坚持的动力!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180714G051WQ00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券