原生JS实现图片的展示和切换效果Demo

原生JS实现图片的展示和切换效果Demo

源码在：https://gitee.com/jimmyxuexue/excellent_interface/tree/master/%E7%82%B9%E5%87%BB%E5%88%87%E6%8D%A2%E6%95%88%E6%9E%9C
写这个Demo的原因是一个好朋友最近也在学习前端，他被这个Demo给难住了，说我绝对做不出来，但是我以看效果感觉确实是不难，主要就是对数组的操作而已。
效果图：



主要的效果就是如下了，但是其实是有一些细节的效果的，比如在点击放大图之后切换图片其实是有动画效果的。
思路：通过JS创建一个对象数组，存储这个图片的名字，标题，src地址，利用导航栏的点击事件动态的筛选出对象数组中需要使用到的对象，在遍历的同时创建DOM节点，其他的点击切换图片主要是利用索引来进行操作。
不得不说一下这个小Demo如果是永Vue来做的话会非常的简单，代码量能省好多好多
主要用到的知识点：
CSS：帧动画，布局知识，透明度，定位的使用
html：很简单，结构正确就行，方便配合定位使用，其他跟切菜没有区别
JS：运用JS语句动态的创建标签，动态给创建的标签绑定事件，添加src属性，ES6的一系列关于数组的好用的方法，以及遍历数组，遍历对象，定时器的使用
JS代码如下：
因为为了展示给同学看，所以JS代码写的比较丑，有很大的优化空间就没有上传了，码云中有源码
到这不得不提一句，JS代码可以反应出一个人的水平究竟是怎样的，写的优雅的代码会进行一些列的封装，复用，就算不写注释，逻辑性也是特别的强。加油~~