前端练习-轮播图

前端练习-轮播图

使用原生js实现，适合初学者练习时进行参考。源码链接放在结尾，有需要自取。

代码实现思路

1.完成静态部分

将图片都装在事先写好的盒子，并使用绝对定位使图片相互覆盖，

2.实现图片自动轮切

由于这里只有三张图，所以在进行部分操作时没有考虑图片较多时的情况，也没有考虑与后端交互时数量未知的情况，这里最好使用length函数来确认图片的数量。

通过调节图片的透明度以实现图片的隐去和显示，加上js回调函数来进行图片轮切周期的设置，（element是通过Class获取到的图片标签）

加上css过渡功能让轮切显得不那么僵硬。

3.箭头实现图片左右切换

左箭头

右箭头操作同上

4.图片的索引跳转

另外两个按钮同理

还有另一种方法，使用forEach+事件监听先判断是那个按钮被点击，再执行操作，这样的好处是简化了代码。

遇到的问题及解决

将<script src="dome.js"></script>放在head，会导致js执行时页面还没渲染完成，js可能找不到对应标签，产生报错，养成将js引入语句放在body底部的好习惯。

这里的报错便是因为将<script src="dome.js"></script>放在head，导致我们设置的onclick所绑定的标签未定义。

源码：https://github.com/ClimberNy/HTML