輪播圖的原理：
html的基本結(jié)構(gòu)：
<body>
<div class="container">
<ul class="list">
<li class="item">
<img
src="http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/d7bbc21db442366a882e04ddc984669a.jpg_750x200_85e640d9.jpg">
</li>
<li class="item">
<img
src="http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20196/818f6cc784ae6669b74bbbb255414a53.jpg_750x200_66ca5873.jpg">
</li>
<li class="item">
<img
src="http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/87a224d0349d94a11e97f31aa1aba4f5.jpg_750x200_1f78af87.jpg">
</li>
</ul>
<ul class="point">
</ul>
</div>
</body>
相應(yīng)的基本樣式：
<style>
* {
padding: 0px;
margin: 0px
}
.container {
width: 100%;
overflow: hidden;
background: grey;
position: relative;
}
.list {
width: 300%;
list-style: none;
}
.list::after {
display: block;
content: "";
clear: both;
}
.item {
width: 375px;
float: left;
}
.item img {
width: 100%;
height: 187px;
display: block
}
.point {
position: absolute;
bottom: 10px;
list-style: none;
left: 50%;
transform: translateX(-50%)
}
.point-item {
width: 8px;
height: 8px;
border-radius: 100px;
margin: 0 5px;
background-color: white;
opacity: .2;
float: left;
}
.point-item.active {
opacity: 1;
}
</style>
重點(diǎn)部分JS邏輯部分：
思考一下，如何通過移動(dòng)ul去選擇圖片呢朽缎。平時(shí)我們是如何操作的呢，我們是手指落在屏幕上向左滑動(dòng)，切換下一張圖片薄翅，向右滑動(dòng)，切換上一張圖片氓奈。所以很好的一個(gè)方案就是記錄手指剛落下的起始橫坐標(biāo)和手指離開頁(yè)面時(shí)的橫坐標(biāo)翘魄，通過判斷起始坐標(biāo)和離開時(shí)坐標(biāo)之差判斷切換的是上一張圖片還是下一張圖片，當(dāng)觸摸取消時(shí)執(zhí)行切換舀奶。
// touchstart觸摸
container.addEventListener('touchstart', function (e) {
state.beginX = e.targetTouches[0].clientX
})
// touchmove觸摸移動(dòng)
container.addEventListener('touchmove', function (e) {
var nowX = e.targetTouches[0].clientX;
state.nowX = nowX//記錄nowX
})
// 觸摸取消
container.addEventListener('touchend', function (e) {
// 記錄endX
state.endX = e.changedTouches[0].clientX
_judgeMove();//切換圖片
})
接下來沿著這條思路去完善：
1.完成_judgeMove()函數(shù)：
功能：如果 state.beginX - state.endX>0暑竟，則是向左滑動(dòng)，切換下一張圖片育勺；否則向右滑動(dòng)但荤；思考一個(gè)問題，我們是否要以0為判斷點(diǎn)呢怀大，如果只是輕微挪動(dòng)誤碰立刻切換纱兑，用戶體驗(yàn)非常糟糕，因此以屏幕寬度的2/5來決定是否要進(jìn)行切換還是維持不動(dòng)化借。
var _judgeMove = function () {
var deltaX = state.beginX - state.endX;
if (deltaX >= window.innerWidth * 2 / 5) {
//下一張
_goNext()
} else if (deltaX <= -window.innerWidth * 2 / 5) {
// 上一張
_goPrev()
}
} else {
// 不動(dòng)
_reset()
}
}
2.從代碼也可以看出來潜慎，現(xiàn)在要實(shí)現(xiàn)三個(gè)函數(shù) _goNext()，_goPrev() 蓖康， _reset()铐炫。三個(gè)函數(shù)的實(shí)現(xiàn)有一點(diǎn)都是必須的，那就是必須知道當(dāng)前顯示的圖片是第幾張蒜焊，好倒信，那就記錄一下，如何移動(dòng)呢泳梆，當(dāng)list和左邊距為0時(shí)鳖悠，左邊貼著父元素的左邊，當(dāng)向右移動(dòng)100%時(shí)优妙，顯示第二張圖片乘综，依次類推，list.style.marginLeft = -state.index * window.innerWidth + 'px'套硼，為了讓變化變得平緩卡辰， list.style.transition = "all .3s"
var _reset = function () {
list.style.transition = "all .3s"
// 現(xiàn)在在第幾張就需要復(fù)位第幾張
list.style.marginLeft = -state.index * window.innerWidth + 'px';
}
var _goPrev = function () {
if (state.index > 0) {
state.index--
list.style.transition = "all .3s"
list.style.marginLeft = -state.index * window.innerWidth + 'px'
} else {
// 復(fù)位
_reset()
}
}
var _goNext = function () {
if (state.index < items.length - 1) {
state.index++
list.style.transition = "all .3s"
list.style.marginLeft = -state.index * window.innerWidth + 'px'
} else {
// 復(fù)位
_reset()
}
其實(shí)故事到這基本結(jié)束了，但是如果想實(shí)現(xiàn)自動(dòng)輪播，其實(shí)就是有一個(gè)定時(shí)函數(shù)九妈，每隔一段時(shí)間執(zhí)行依次_judgeMove(),但是在滑動(dòng)過程中反砌，可能剛剛滑動(dòng)了以后，定時(shí)函數(shù)又工作了萌朱，導(dǎo)致瞬間跳轉(zhuǎn)兩頁(yè)宴树，這個(gè)顯然是不理想的，因此
setInterval(function () {
timer++;
if (timer === 20) {
if (state.index === (items.length - 1)) {
state.index = -1
}
_goNext();
}
if (timer > 20) {
timer = 0
}
}, 100)
設(shè)置一個(gè)timer去控制嚷兔，修改一下觸摸取消的函數(shù)
// 觸摸取消
container.addEventListener('touchend', function (e) {
// 記錄endX
state.endX = e.changedTouches[0].clientX
_judgeMove();
timer = 0//重要
})
基本就此完結(jié)森渐，這個(gè)是一個(gè)理順?biāo)季S的過程做入，如果想要源代碼可以去github觀察觀察冒晰，其中有相應(yīng)的小點(diǎn)點(diǎn)功能和循環(huán)播放的功能！＞箍椤壶运！
https://github.com/cherrysink/swiper
