web前端学习之轮播图实现（原生js）
2021-03-31 13:27
YPE html>
标签：use 第一个 prot alt 叠加 text center dev 小练习
很久前接触过html css js 但自己在工作中用的少，简单的需求直接vue 走起，没有静下心好好写点js css 什么的，现在想要好好学习下 大前端的知识了，第一个小练习，做了个轮播图
网上有很多轮播图的实现过程,每个人都有自己不一样的思路，自己只要实现了就行。当然有些思路确实比我的要好，后续借鉴学习。
逻辑：将要展示的图片全部放在盒子里，超出部分隐藏，然后设置定时器，没两秒循环一次 img 标签，如果display 为block 就将 display 设置为none 那么后面的图片就到当前的div 区域内了，大体思路是这样 ，当然后面加入了js 时间 支持前后翻页，和提示功能
上代码如下：
caroucel >
代码也是很简单的，主要联系下，js 遍历 dom 的操作，孰能生巧，多多练习
有个小问题，如果我想把图片做成动画，淡入淡出 ，应该怎么搞呢？目前我想到的方法是利用 trasition opacity 进行区域透明度的切换，但是我的轮播图的逻辑也得修改了，不用上面的（将图片全部叠加在一起通过 opacity 控制他们的隐藏显示）
做的过程中有发现个方法，通过定位把几张图片从左往右一次拼接起来，点击的时候向左或者向右触发事件，事件内容是修改各个图片的定位 left right 值 从而产生左右翻滚的效果。（z-index 也是个实现的方法）
刚开始感觉下手很难，但做着做着方法也就越来越多，根据需求选择最合适的最适合自己的就好。
web前端学习之轮播图实现（原生js）
标签：use 第一个 prot alt 叠加 text center dev 小练习
原文地址：https://www.cnblogs.com/my-python-2019/p/12583853.html
文章标题：web前端学习之轮播图实现（原生js）
文章链接：http://soscw.com/index.php/essay/70480.html