-
轮播实现的原理
- 布局: 让父元素相对定位,设定宽高为一个图片的宽度,元素浮动横向排列,并且overflow:hidden;在父容器中设置一个图片容器,高度为图片的高度,宽度为图片的宽度*图片的个数;在底部设置小圆点,绝对定位于父容器的底部。
- 逻辑: 将尾图片和首图片clone后,分别放在首尾;增加图片容器的宽度;封装向前、向后翻页的方法(动画、动画锁、变化小圆点的状态);最后为按钮添加事件。
函数:play(n):封装向后n页(n可以是负数),playNext:向后,playpre:向前。
本文标题:轮播
本文链接:https://www.haomeiwen.com/subject/utlpyxtx.html
网友评论