84 lines
2.1 KiB
JavaScript
84 lines
2.1 KiB
JavaScript
var pagination = _(".swiper-pagination .swiper-pagination-item");
|
|
var timer;
|
|
//上一页
|
|
$(".swiper-button-prev").onclick = function() {
|
|
motion(520, 'prev')
|
|
}
|
|
|
|
//下一页
|
|
$(".swiper-button-next").onclick = function() {
|
|
motion(-520, 'next')
|
|
}
|
|
|
|
function motion(offset, type) {
|
|
if (translateX() == -1560) {
|
|
$(".swiper-wrapper").classList.remove("dh")
|
|
SetTranslateX(0)
|
|
}
|
|
|
|
setTimeout(() => {
|
|
$(".swiper-wrapper").classList.add("dh")
|
|
var totalDistance = translateX() + offset;
|
|
if (totalDistance < -1560) {
|
|
totalDistance = 0
|
|
}
|
|
|
|
if (totalDistance > 0) {
|
|
totalDistance = -1560
|
|
}
|
|
|
|
var index = Math.abs(totalDistance / 520)
|
|
console.log(index)
|
|
if (index == 3) {
|
|
if (type == "next") {
|
|
index = 0
|
|
changePagination(index)
|
|
SetTranslateX(totalDistance)
|
|
} else {
|
|
$(".swiper-wrapper").classList.remove("dh")
|
|
SetTranslateX(-1560)
|
|
setTimeout(() => {
|
|
totalDistance = -1040
|
|
$(".swiper-wrapper").classList.add("dh")
|
|
index = 2
|
|
changePagination(index)
|
|
SetTranslateX(totalDistance)
|
|
}, 100)
|
|
}
|
|
} else {
|
|
changePagination(index)
|
|
SetTranslateX(totalDistance)
|
|
}
|
|
}, 100)
|
|
|
|
}
|
|
|
|
|
|
pagination.forEach((v, i) => {
|
|
v.onclick = () => {
|
|
changePagination(i)
|
|
}
|
|
});
|
|
|
|
function changePagination(i) {
|
|
pagination.forEach(item => item.classList.remove("active"))
|
|
pagination[i].classList.add("active")
|
|
SetTranslateX(i * -520)
|
|
}
|
|
|
|
//让图片移动
|
|
function SetTranslateX(distance) {
|
|
$(".swiper-wrapper").style.transform = `translateX(${distance}px)`
|
|
}
|
|
|
|
function translateX() {
|
|
return Number($(".swiper-wrapper").style.transform.match(/translateX\(([\s\S]*?)px\)/)[1])
|
|
}
|
|
|
|
function $(className) {
|
|
return document.querySelector(className);
|
|
}
|
|
|
|
function _(className) {
|
|
return document.querySelectorAll(className);
|
|
} |