題目1：輪播的實現(xiàn)原理是怎樣的？如果讓你來實現(xiàn)扣汪，你會抽象出哪些函數(shù)(or接口)供使用？（比如 play()）
輪播原理.jpg
布局：
設(shè)置一個整體輪播容器锨匆，給容器設(shè)置一個圖片的寬高崭别，設(shè)置相對定位，并且設(shè)置overflow：hide 隱藏溢出部分恐锣。輪播容器內(nèi)創(chuàng)建圖片容器和焦點切換容器茅主，設(shè)置圖片容器，高度為圖片高度土榴，寬度為所有包含的圖片寬度（可以不設(shè)置寬度诀姚，但需要使用jQ添加計算后的所有圖片寬度），把所有圖片排成一列玷禽，便于實現(xiàn)輪播赫段。設(shè)置一個焦點選項區(qū)域，相對于輪播容器定位在底部矢赁。
邏輯：
通過移動內(nèi)容塊的位置糯笙，使內(nèi)容塊內(nèi)部的元素達到切換效果，具體實現(xiàn)為：在尾部clone第一個元素撩银，在頭部clone最后一個元素并相應(yīng)增加圖片容器的寬度给涕；當運動到clone首圖片時，立即移動到真實首圖片蜒蕾，當運動到clone尾圖片時稠炬，就立即將其移動到真實尾圖片，這樣我們的肉眼看上去就是連貫循環(huán)的咪啡。當快速切換到不同頁面時就需要知道當前正在展現(xiàn)的是哪一頁首启，可以設(shè)置一個標記位，初始值為0撤摸，每次切換時這個標記位的值都要跟著改變毅桃。
函數(shù)接口：
-
autoPlay() 自動輪播
-
playNext() 切換到下一頁
-
playPre() 切換到上一頁
-
setBullet() 設(shè)置焦點切換效果
題目2：實現(xiàn)視頻中的左右滾動無限循環(huán)輪播效果
css部分
.carousel{
position: relative;
width: 320px;
height: 180px;
overflow: hidden;
}
.carousel ul,
.carousel li{
margin: 0;
padding: 0;
list-style: none;
}
.carousel .img-ct{
position: absolute;
overflow: hidden;
}
.carousel .img-ct>li{
float: left;
}
.carousel .img-ct img{
width: 320px;
height: 180px;
}
.carousel .arrow{
position: absolute;
top: 50%;
margin-top: -15px;
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid #fff;
line-height: 30px;
color: #fff;
text-align: center;
text-decoration: none;
}
.carousel .arrow:hover{
opacity: 0.8;
}
.carousel .pre{
left: 10px;
}
.carousel .next{
right: 10px;
}
.carousel .bullets{
position: absolute;
bottom: 10px;
font-size: 0;
width: 100%;
z-index: 1;
text-align: center;
}
.carousel .bullets > li{
display: inline-block;
width: 30px;
height: 5px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
margin: 0 3px;
}
.carousel .bullets > li.active{
background-color: #ccc;
}
HTML部分
<div class="carousel">
<ul class="img-ct">
<li data-id=0>
<a href="#">
</a>
</li>
<li data-id=1>
<a href="#">
</a>
</li>
<li data-id=2>
<a href="#">
</a>
</li>
<li data-id=3>
<a href="#">
</a>
</li>
</ul>
<a href="#" class="pre arrow"><</a>
<a href="#" class="next arrow">></a>
<ul class="bullets">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
jQuery部分
var $imgCt = $('.carousel .img-ct')
//獲取圖片容器
var $imgs = $('.carousel .img-ct>li')
//獲取所有圖片
var $preBtn = $('.carousel .pre')
//獲取上一頁按鈕
var $nextBtn = $('.carousel .next')
//獲取下一頁按鈕
var $bullets = $('.carousel .bullets li')
//獲取所有焦點
var pageIndex = 0;
//當前圖片下標
var isAnimate = false
//防止用戶的重復(fù)點擊褒纲，加鎖
var imgCount = $imgs.length
//獲取所有圖片長度
var imgWidth = $imgs.width()
//獲取單個圖片寬度
$imgCt.append($imgs.first().clone())
//克隆第一個圖片，添加到圖片容器最后
$imgCt.prepend($imgs.last().clone())
//克隆最后一個圖片钥飞，添加到圖片容器最前
$imgCt.width(( imgCount + 2 ) * imgWidth )
//把圖片容器的寬度莺掠，設(shè)置為([原始圖片個數(shù)+后來新增的2個] x 一個圖片寬度)
$imgCt.css({left:-imgWidth})
//圖片容器向左移動負一個圖片寬度(整體左移一個圖片位置)
$nextBtn.click(function(){
playNext(1) //點擊下一張按鈕，執(zhí)行函數(shù) 展示 下一頁
})
$preBtn.click(function(){
playPre(1) //點擊上一張按鈕读宙，執(zhí)行函數(shù) 展示 上一頁
})
/*點擊焦點定位部分*/
$bullets.click(function(){
var index = $(this).index() //獲取點擊焦點下標
if( index > pageIndex ){ //如果點擊的下標大于當前圖片的下標
playNext( index - pageIndex ) //調(diào)用下一頁函數(shù)(滾動格數(shù)為: [點擊下標 - 當前圖片的下標位置])
}else if(index < pageIndex){ //如果點擊的下標 小于 當前圖片的下標位置
playPre( pageIndex - index ) //調(diào)用向前滾動函數(shù)(滾動格數(shù)為: [當前圖片的下標位置 - 點擊下標])
}
})
function playNext(len){
if(isAnimate) return; //正在動畫中彻秆，return掉
isAnimate = true ; //表示現(xiàn)在要動畫了 加鎖
$imgCt.animate({
left: '-=' + len * imgWidth //在原來基礎(chǔ)上，再減少 len 個圖片寬度的值
},function(){ //當執(zhí)行完之后
pageIndex += len; //一次加上滾動的頁碼
if( pageIndex === imgCount ){ //當點擊到[原始圖片個數(shù)](4)
pageIndex = 0;
$imgCt.css({left:-imgWidth}) //回到初始位置
} //這里用.css 沒有動畫效果结闸，立刻切換到
setBullet() //調(diào)用焦點切換函數(shù)
isAnimate = false; //動畫完成之后 解鎖
})
}
function playPre(len){
$imgCt.animate({
left:'+='+len*imgWidth //在原來基礎(chǔ)上唇兑，再加上 len 個圖片寬度的值
},function(){
pageIndex -= len //一次減去滾動的頁碼
if(pageIndex < 0){ //當滾動到最前一張
pageIndex = imgCount - 1 //總數(shù)-1(3) 切換到最后一張
$imgCt.css({left:-imgCount*imgWidth})
} //讓圖片切換過去
setBullet() //調(diào)用焦點切換函數(shù)
})
}
function setBullet(){
$bullets.removeClass('active') //全部去掉.active
.eq(pageIndex) //點擊的那個
.addClass('active') //添加.active
}
//自動輪播部分
// setInterval(function(){
// playNext(1)
// },3000)
