前端：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部分的讲解有种力不从心的感觉，我还是平时总结的少，缺乏这方面的经验，但我会坚持下去，不断的进步。

谢谢你们的观看，你们的点击是我坚持的动力！