JavaScript touch / 实现一个支持手势滑动的轮播
2017-12-05 本文已影响0人
羊烊羴
我们自己封装一个移动端的轮播图方法，支持手势滑动
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.carousel {
width: 100%;
height: 200px;
border: 1px solid #000;
box-sizing: border-box;
margin: 100px auto;
overflow: hidden;
position: relative;
}
ul {
height: 100%;
}
ul li {
height: 100%;
float: left;
text-align: center;
line-height: 200px;
font-size: 30px;
font-weight: 700;
color: #000;
}
ul li:nth-child(1) {
background-color: burlywood;
}
ul li:nth-child(2) {
background-color: red;
}
ul li:nth-child(3) {
background-color: deepskyblue;
}
ul li:nth-child(4) {
background-color: navajowhite;
}
ul li:nth-child(5) {
background-color: burlywood;
}
ul li:nth-child(6) {
background-color: red;
}
ol {
position: absolute;
bottom: 10px;
left: 50%;
transform: translate(-50%);
}
ol li {
width: 10px;
height: 10px;
border-radius: 100%;
border: 1px solid #000;
margin-left: 5px;
float: left;
}
.active {
background-color: greenyellow;
}
</style>
<title>Sliber</title>
</head>
<body>
<div class="carousel">
<ul>
<li>4</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>1</li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
<script>
function Carousel(options) {
var def = {
isPoints: true,
time: 2000,
direction: "left"
}
this.option = Object.assign({}, def, options);
this.init();
this.startUp();
this.touch();
}
Carousel.prototype.init = function () {
this.bannerBox = document.querySelector(".carousel");
this.imgBox = this.bannerBox.querySelector(".carousel ul");
this.imgs = this.imgBox.querySelectorAll(".carousel ul li");
this.pointBox = this.bannerBox.querySelector(".carousel ol");
this.points = this.pointBox.querySelectorAll(".carousel ol li");
this.w = this.bannerBox.offsetWidth;
this.l = this.imgs.length;
this.index = 0
this.imgBox.style.width = this.l * this.w + "px";
this.start = 0;
this.move = 0;
this.distance = 0;
this.isMove = false;
for (var i = 0; i < this.l; i++) {
this.imgs[i].style.width = this.w + "px";
}
if (this.option.isPoints && !this.points) {
console.error("是不是忘记写入角标元素了~~")
}
}
Carousel.prototype.setTranslateX = function (currX) {
this.imgBox.style.transform = "translateX(" + currX + "px)";
this.imgBox.style.webkitTransformm = "translateX(" + currX + "px)";
}
Carousel.prototype.addTransition = function () {
this.imgBox.style.transition = "all 1s";
this.imgBox.style.webkitTransition = "all 1s";
}
Carousel.prototype.removeTransition = function (ele) {
this.imgBox.style.transition = "none";
this.imgBox.style.webkitTransition = "none";
}
Carousel.prototype.startUp = function () {
var that = this;
this.timer = setInterval(function () {
that.index++;
var currX = -that.index * that.w;
that.addTransition();
that.setTranslateX(currX);
that.transitionEnd();
}, this.option.time)
}
Carousel.prototype.transitionEnd = function () {
var that = this;
this.imgBox.addEventListener("transitionend", function () {
if (that.index >= that.l - 1) {
that.index = 1;
}
if (that.index <= 0) {
that.index = that.l - 1;
}
that.removeTransition();
var currX = -that.index * that.w;
that.setTranslateX(currX);
that.setPoints();
})
}
Carousel.prototype.setPoints = function () {
var i = 0,
l = this.points.length,
points = this.points;
for (; i < l; i++) {
points[i].classList.remove("active")
}
points[this.index - 1].classList.add("active");
}
Carousel.prototype.touch = function () {
var that = this;
this.imgBox.addEventListener("touchstart", function (e) {
that.isMove = true;
clearInterval(that.timer)
that.start = e.changedTouches[0].pageX;
})
this.imgBox.addEventListener("touchmove", function (e) {
that.move = e.changedTouches[0].pageX;
that.distance = that.move - that.start;
var currX = -that.index * that.w + that.distance;
that.setTranslateX(currX);
})
this.imgBox.addEventListener("touchend", function () {
if (Math.abs(that.distance) >= (that.w / 3) && that.isMove) {
that.distance > 0 ?
that.index-- :
that.index++;
var currX = -that.index * that.w;
that.setTranslateX(currX);
that.addTransition();
} else {
var currX = -that.index;
that.setTranslateX(currX);
that.addTransition();
}
this.start = 0;
this.move = 0;
this.distance = 0;
this.isMove = false;
that.startUp();
})
}
var car = new Carousel({})
</script>
</html>
