移动端图片自动轮播插件,包括手指按下(touchstart)、手指移动(touchmove)和手指离开(touchend)的事件处理。
js代码
//清楚浏览器的默认行为
document.addEventListener('touchstart', function (e) {
e.preventDefault();
});
window.onload = function () {
var wrap = document.querySelector('#wrap');
var box = document.querySelector('#box');
box.innerHTML += box.innerHTML;
var alis = document.querySelectorAll('#box li');
var spans = document.querySelectorAll('#nav span');
//console.log(spans);
//样式初始化
styleInt();
moveIng();
function styleInt() {
box.style.width = 100 * alis.length + '%';
wrap.style.height = alis[0].offsetHeight + 'px';
for (var i = 0; i < alis.length; i++) {
alis[i].style.width = 100 / alis.length + '%';
}
}
function moveIng() {
var startPoint, endPoint;
var Len;
var startX = 0;
var transX = 0;
var now = 0;
var timer = 0;
spans[now].className = 'active';
//自动轮播
autoTab();
//手指按下
box.addEventListener('touchstart', function (e) {
clearInterval(timer);
startPoint = e.changedTouches[0].pageX;
now = Math.round(-transX / wrap.offsetWidth);
if (now == 0) {
now = spans.length;
}
if (now >= alis.length - 1) {
now = spans.length - 1;
}
transX = -now * wrap.offsetWidth;
box.style.transform = 'translateX(' + transX + 'px)';
startX = transX;
});
//手指移动
box.addEventListener('touchmove', function (e) {
clearInterval(timer);
endPoint = e.changedTouches[0].pageX;
Len = endPoint - startPoint;
transX = startX + Len;
box.style.transition = 'none';
box.style.transform = 'translateX(' + transX + 'px)';
});
//手指离开
box.addEventListener('touchend', function () {
now = Math.round(-transX / wrap.offsetWidth);
tab();
autoTab();
});
function tab() {
box.style.transition = 'all 0.2s';
box.style.transform = 'translateX(' + (-now * wrap.offsetWidth) + 'px)';
for (var i = 0; i < spans.length; i++) {
spans[i].className = '';
}
spans[now % spans.length].className = 'active';
};
//自动轮播
function autoTab() {
clearInterval(timer);
timer = setInterval(function () {
if (now == 0) {
now = spans.length;
}
if (now == alis.length - 1) {
now = spans.length - 1;
}
box.style.transition = 'none';
box.style.transform = 'translateX(' + (-now * wrap.offsetWidth) + 'px)';
setTimeout(function () {
now++;
tab();
}, 30)
}, 1000)
}
}
}