本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞（窃喜）。 鉴于时不时有童鞋翻我以前的沸点，因此，本系列收集了个人目前发过的所有CSS知识点动图，以便阅读。 两个月前，曾发过一篇《你未必知道的49个CSS知识点》，已有3000多赞，这里，老姚真心谢谢大家的支持。 …

效果图普通轮播图卡片式轮播图堆叠式轮播图普通轮播图普通轮播图-演示普通轮播图-源码思路：如上图所示，假设有三张图片进行轮播，绿色区域是显示区域，其它部分都是隐藏的页面渲染时,会多选择两张图片，图中数字

此版本轮播图为仿照网易云音乐PC播放器上首页的轮播。 网易的轮播特殊的地方就在于，如果你滑动不相邻的两张图片，其过渡效果并不是滑动过渡，而是一个跳出过渡，此方面原理与最开始设计轮播排版时候有极大关联。 此轮播为纯react环境下的es6写法，通过对state中数组的重组排列，配…

前段时间准备用vue加上网易云的nodejs接口，模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局，所以没有使用UI组件。在轮播图部分，本来在vue里面写了一下，但是发现总是出现bug,所以后来准备封装一个插件来实现。 其次的一个原因是，以为这一学期学…

这几天忙着毕业设计，其中一个页面需放上轮播图，遂听着音乐在网上寻(chao)找(xi)灵(an)感(li)，猛地发现原来网易云音乐客户端的轮播图就非常好看，所以就尝试着模仿了一个，虽然十分简陋，但好在也迈出了第一步。 轮播图的原理大家应该都知道，那让我再重复一遍(23333)，…

用原生js将轮播图做成组件，提高代码复用率

在实现封装之前，先介绍一下Swiper。 Swiper是纯Javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。 Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选…

这是这次系列文章的第一篇，我自己封装了一个用vue实现的拖拽排列卡片组件，并且发布到npm，详细地记录下来了整体制作过程。总共有三篇文章，介绍组件的制作思路和遇到的问题，以及在发布到npm上并下载使用的过程中，发生了什么问题并如何解决。 两个部分都是可以进行自定义内容及样式的。…

图片轮播是种很常见的场景和功能，一般移动网站首页的轮播 banner，商品闲情页的商品图片等位置都会用到此功能 像这种常用的场景功能肯定是有人早就写好插件了的，所以遇到这种场景，一般都遵循以下三步：