进阶17 轮播
2018-05-15 本文已影响0人
饥人谷_哈噜噜
题目1： 轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()）
- 将轮播的图片放置在一条直线上
1.创建一个容器用来展示轮播图片的窗口<div class="carouselr">，只留出一个图片的宽度，其它图片均不可见overflow:hidden;position:relative;。
2.克隆第一张和最后一张图片放置在直线的最后和最前，当滚动上述两个图片时，回到该复制体原图片的位置。
3.发生滚动时根据需要向左或向右偏移(imgCount+2)*图片宽度的位置，使窗口中的图片达到看似向左或向右滑动的效果。 - 将轮播的图片放置在同一垂直平面上，记录当前图片编号和要滚动到的图片编号，轮播时显示要滚动到的图片，隐藏掉之前的图片
-
playNext(); // 点击“下一个”按钮("<a class="arrow next")，使图片向左滑动
playPrev(); //点击“上一个”按钮("<div class="arrow pre")，使图片向右滑动
setBullet(); //根据当前展示图片的索引，将`class=active`的样式切换到对应的tab
