题目1:轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play())
<div class="carousel">
<ul class="img-ct clearfix">
<li><a href="#">![](images/slide1.png)</a></li>
<li><a href="#">![](images/slide2.png)</a></li>
<li><a href="#">![](images/slide3.png)</a></li>
</ul>
<div class="arrow prev"><</div>
<div class="arrow next">></div>
<ul class="bullet clearfix">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
基本原理(左右滑动):
1.首先,要创建一个容器用来展示轮播图片的窗口(<div class="container">
),因为一次只展示一张图片,所以设置其宽高为一张图片的宽高,并设置其样式overflow:hidden;position:relative;
。
2.其次,创建一个包裹轮播图的容器(<ul class="img-ct">
),并设置其样式为position:absolute
.
3.因为图片(<img>
)是包裹在元素li
里的,所以设置li
样式float:left
使所有li
都在同行显示。
4.此时,通过改变包裹图片的容器(<ul class="img-ct"
)的position
的left
值,使图片达到在窗口(<div class="container"
)中看似向左或向右滑动的效果。
根据基本原理,总的来说,可以抽象出以下几个函数:
playNext(); // 点击“下一个”按钮("<div class="next"),使图片向左滑动
playPrev(); //点击“上一个”按钮("<div class="prev"),使图片向右滑动
setBullet(); //根据当前展示图片的索引,将`class=active`的样式切换到对应的tab
play(); // 利用setInterval函数设置定时器,使轮播自动播放
stop(); // 利用clearInterval函数清除定时器,使轮播停止播放。