轮播图的原理：
html的基本结构.png
基本原理.png
html的基本结构：
<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>
相应的基本样式：
<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>
重点部分JS逻辑部分：
思考一下，如何通过移动ul去选择图片呢。平时我们是如何操作的呢，我们是手指落在屏幕上向左滑动，切换下一张图片，向右滑动，切换上一张图片。所以很好的一个方案就是记录手指刚落下的起始横坐标和手指离开页面时的横坐标，通过判断起始坐标和离开时坐标之差判断切换的是上一张图片还是下一张图片，当触摸取消时执行切换。
// touchstart触摸
container.addEventListener('touchstart', function (e) {
state.beginX = e.targetTouches[0].clientX
})
// touchmove触摸移动
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()函数：
功能：如果 state.beginX - state.endX>0，则是向左滑动，切换下一张图片；否则向右滑动；思考一个问题，我们是否要以0为判断点呢，如果只是轻微挪动误碰立刻切换，用户体验非常糟糕，因此以屏幕宽度的2/5来决定是否要进行切换还是维持不动。
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 {
// 不动
_reset()
}
}
2.从代码也可以看出来，现在要实现三个函数 _goNext()，_goPrev() ， _reset()。三个函数的实现有一点都是必须的，那就是必须知道当前显示的图片是第几张，好，那就记录一下，如何移动呢，当list和左边距为0时，左边贴着父元素的左边，当向右移动100%时，显示第二张图片，依次类推，list.style.marginLeft = -state.index * window.innerWidth + 'px'，为了让变化变得平缓， list.style.transition = "all .3s"
var _reset = function () {
list.style.transition = "all .3s"
// 现在在第几张就需要复位第几张
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 {
// 复位
_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 {
// 复位
_reset()
}
其实故事到这基本结束了，但是如果想实现自动轮播，其实就是有一个定时函数，每隔一段时间执行依次_judgeMove(),但是在滑动过程中，可能刚刚滑动了以后，定时函数又工作了，导致瞬间跳转两页，这个显然是不理想的，因此
setInterval(function () {
timer++;
if (timer === 20) {
if (state.index === (items.length - 1)) {
state.index = -1
}
_goNext();
}
if (timer > 20) {
timer = 0
}
}, 100)
设置一个timer去控制，修改一下触摸取消的函数
// 触摸取消
container.addEventListener('touchend', function (e) {
// 记录endX
state.endX = e.changedTouches[0].clientX
_judgeMove();
timer = 0//重要
})
基本就此完结，这个是一个理顺思维的过程，如果想要源代码可以去github观察观察，其中有相应的小点点功能和循环播放的功能！！！
https://github.com/cherrysink/swiper
网友评论