111 lines
2.3 KiB
JavaScript
111 lines
2.3 KiB
JavaScript
var timer;
|
||
|
||
// 下一页
|
||
$(".swiper-button-next").onclick = function () {
|
||
animation(-520)
|
||
}
|
||
|
||
// 上一页
|
||
$(".swiper-button-prev").onclick = function () {
|
||
animation(520)
|
||
}
|
||
|
||
|
||
// 计算移动距离，和越界处理
|
||
function animation(offset) {
|
||
var oldOffset = parseInt($(".swiper-wrapper").style.transform.substring(11));
|
||
var newOffset = oldOffset + offset;
|
||
|
||
if (newOffset < -1040) {
|
||
newOffset = 0
|
||
};
|
||
|
||
if (newOffset > 0) {
|
||
newOffset = -1040
|
||
};
|
||
|
||
DotChange(Math.abs(newOffset / 520))
|
||
changeX(newOffset)
|
||
|
||
}
|
||
|
||
|
||
// 绑定小圆点的点击事件
|
||
var dot = $(".swiper-pagination .swiper-pagination-dot")
|
||
dot.forEach(function (v,i){
|
||
v.onclick = function () {
|
||
DotChange(i)
|
||
}
|
||
})
|
||
|
||
|
||
// 切换小圆点
|
||
function DotChange(i) {
|
||
dot.forEach(function (val,index){
|
||
val.classList.remove("dot-active")
|
||
})
|
||
dot[i].classList.add("dot-active")
|
||
changeX(i*-520)
|
||
}
|
||
|
||
// 让图片动起来
|
||
function changeX(x) {
|
||
$(".swiper-wrapper").style = `
|
||
transform: translateX(${x}px);
|
||
`
|
||
}
|
||
|
||
// 鼠标悬浮，清除定时器
|
||
$(".swiper-container").onmousemove = function () {
|
||
clearInterval(timer)
|
||
}
|
||
|
||
// 鼠标离开，自动播放
|
||
$(".swiper-container").onmouseout = function () {
|
||
AutoPlay()
|
||
}
|
||
|
||
function AutoPlay() {
|
||
// 定时器，自动播放
|
||
timer = setInterval(function (){
|
||
$(".swiper-button-next").onclick()
|
||
}, 1000)
|
||
}
|
||
|
||
AutoPlay()
|
||
|
||
|
||
// 模仿框架jq实现 $ 功能
|
||
function $(className) {
|
||
var classNameArr = className.split(" ");
|
||
|
||
if (classNameArr.length == 1) {
|
||
return document.querySelector(className)
|
||
} else {
|
||
// 多类名的时候，获取最后一个类名的上一个类名
|
||
var fatherClassName = classNameArr[classNameArr.length-2];
|
||
// 获取最后一个类名
|
||
var lastClassName = classNameArr[classNameArr.length -1];
|
||
|
||
var NewArr = []
|
||
// 获取父级有多少个子元素
|
||
var childrenList = document.querySelector(fatherClassName).children;
|
||
// 返回你要的子元素
|
||
for (let i = 0; i < childrenList.length; i++) {
|
||
if (childrenList[i].className.indexOf(lastClassName.replace(".","")) != -1) {
|
||
NewArr.push(childrenList[i])
|
||
}
|
||
}
|
||
|
||
return NewArr.length == 1 ? NewArr[0] : NewArr
|
||
// // 如果只有一个，返回html
|
||
// if (NewArr.length == 1) {
|
||
// return NewArr[0]
|
||
// // 多个直接返回数组
|
||
// } else {
|
||
// return NewArr
|
||
// }
|
||
}
|
||
|
||
}
|