1.无缝滑屏的时候,图片是表单序列
一、在做表单序列的时候,有两种方法
1)列举
2)循环
①把图片放入一个数组
②找在.carousel-wrap属性,如果存在,则创建<ul>标签,将css添加,然后为每一个图片添加标签。
(classList:用于在元素中添加,移除及切换 CSS 类。)
③添加节点appendChild
二、滑屏圆点
1)创建
2)滑屏动作
①拿到元素一开始的位置
②拿到手指一开始的点击位置
③拿到手指move的实施距离
④将食指移动的距离加给元素
以上行为分3个动作touchstart, touchmove, touchend,在end的时候,有两种方法
a.抽象index的ul的实时位置
offsetLeft / 视口的宽度
b.抽象了图像的索引
3)处理小圆点的位置
先把每个圆点的动态删除,然后再添加上去。index左滑的值为负值
2.css注意点
1)list的宽度为视口的width*图片数,而单个的图片的width,为整个 1/图片数
或者,当用循环写布局的时候,可以把css写入脚本
2)position:absolute / relative
①absolute:在文档流中不占据空间,会浮起来。比如说:消息上的小红点
②relative:占据空间,也可以浮起来
3)z-index:属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
4)display:inline_block 元素具有宽度高度特性,又具有同行特性