关于无缝轮播图初步理解
参考:https://blog.csdn.net/weixin_44135121/article/details/87887306
无缝轮播图的一般轮播图的区别
一般:边界图片(头和末)的切换(left值变化),视觉上会经过中间的图片。
无缝:展现出来的是直接切换的效果,视觉上没有经过中间图片。
布局区别:
因为无缝在第一张图片前copy多了一份尾部图片,所以按左箭头时能直接展现最后一张,与此同时再改变left值,实现无缝衔接。尾部同理。
分析需实现的功能
-
copy图片
-
设置一个轮播的公共方法,play[传入计算好应有的left(图片),应激活的index(小圆点)]
-
elemtnt.style.left = left + ‘px’;(转成字符串)
-
for循环判断哪个小圆点= activeIndex - 1;符合的那个赋一个激活样式的类名
3.设置边界轮播方法,critcality
-
边界