纯javsscript轮播代码- 编程源码 -卓越飞翔博客

经常用到轮播代码，而且PC端和移动端要自适应，为了方便自己写了个备用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>yp-slide幻灯片</title>
<style>
body {
background: gray;
user-select: none;
overflow-x: hidden;
}
.yp-slide {
background-color: white;
margin: 0 auto;
white-space: nowrap;
border: 2px solid #fff;
height: 300px;
overflow: hidden;
}
.yp-slide .slide-item {
width: 2000px;
}
.yp-slide .slide-item > div {
height: 300px;
float: left;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
</style>
</head>
<body>
<div class="yp-slide" id="yp-slide">
<div class="slide-item">
<div class="green">1</div>
<div class="blue">2</div>
<div class="red">3</div>
<div class="yellow">4</div>
</div>
</div>

<script>
const ypslide = {
slideId: "yp-slide", //轮播ID
speed: 2000, //切换速度
slide: null, //轮播对象化
items: null, //轮播内容
x: 0, //项目位移距离
late_x: 0, //拖动距离
runTimer: null, //定时器
init: () => {
//轮播图
ypslide.slide = document.getElementById(ypslide.slideId);
//项目宽度
ypslide.x = ypslide.slide.clientWidth;
//轮播项目
ypslide.items = document.querySelector(".slide-item");
//轮播项目集
let items = ypslide.items.children;
ypslide.items.style.width = items.length * ypslide.x + "px";
for (let i = 0; i < items.length; i++) {
items[i].style.width = ypslide.x + "px";
}
//最后一个项目
let endItem = items[items.length - 1];
//第一个项目
let firstItem = items[0];
//最后一个移动到第一个位置
ypslide.items.insertBefore(endItem, firstItem);
//向左移动最后一个项目的宽度距离
ypslide.items.style.transition = "transform 0s";
ypslide.items.style.transform = "translateX(-" + ypslide.x + "px)";
//鼠标进入后停止
ypslide.items.onmouseenter = ypslide.stop;
//鼠标离开后启动
ypslide.items.onmouseleave = ypslide.run;
//鼠标按下记录A点
ypslide.items.onmousedown = (e) => {
ypslide.down = true;
ypslide.x_a = e.clientX;
};
//鼠标移动记录B点
ypslide.items.onmousemove = (e) => {
if (ypslide.down) {
ypslide.x_b = e.clientX;
ypslide.late_x = -(ypslide.x_a - ypslide.x_b + ypslide.x);
ypslide.items.style.transition = "transform 0s";
ypslide.items.style.transform =
"translateX(" + ypslide.late_x + "px)";
}
};
//鼠标抬起判断是否移动
ypslide.items.onmouseup = (e) => {
ypslide.down = false;
if (ypslide.x_b) {
if (ypslide.x_a - ypslide.x_b > 30) {
ypslide.goleft();
}
if (ypslide.x_a - ypslide.x_b < 30) {
console.log("goright");
ypslide.goright();
}
}
ypslide.down = null;
ypslide.x_b = null;
ypslide.late_x = 0;
};

//移动端按下记录A点
ypslide.items.ontouchstart = (e) => {
ypslide.stop();
ypslide.down = true;
ypslide.x_a = e.touches[0].clientX;
};
//移动端移动记录B点
ypslide.items.ontouchmove = (e) => {
if (ypslide.down) {
ypslide.x_b = e.touches[0].clientX;
ypslide.late_x = -(ypslide.x_a - ypslide.x_b + ypslide.x);
ypslide.items.style.transition = "transform 0s";
ypslide.items.style.transform =
"translateX(" + ypslide.late_x + "px)";
}
};

//移动端抬起判断是否移动
ypslide.items.ontouchend = (e) => {
ypslide.down = false;
if (ypslide.x_b) {
if (ypslide.x_a - ypslide.x_b > 30) {
ypslide.goleft();
}
if (ypslide.x_a - ypslide.x_b < 30) {
console.log("goright");
ypslide.goright();
}
}
ypslide.down = ypslide.x_b = null;
ypslide.late_x = 0;
ypslide.run;
};

//启动
ypslide.run();
},
reset: (t) => {
let items = ypslide.items.children;
if (t == "left") {
ypslide.items.appendChild(items[0]);
ypslide.items.style.transition = "transform 0s";
ypslide.items.style.transform = "translateX(-" + ypslide.x + "px)";
}
if (t == "right") {
let endItem = items[items.length - 1];
let firstItem = items[0];
ypslide.items.insertBefore(endItem, firstItem);
ypslide.items.style.transition = "transform 0s";
ypslide.items.style.transform = "translateX(-" + ypslide.x + "px)";
}
},
goleft: () => {
ypslide.items.style.transition = "transform 0.5s ease";
ypslide.items.style.transform =
"translateX(-" + ypslide.x * 2 + "px)";
setTimeout(ypslide.reset, 400, "left");
},
goright: () => {
ypslide.items.style.transition = "transform 0.5s ease";
ypslide.items.style.transform = "translateX(0)";
setTimeout(ypslide.reset, 400, "right");
},
run: () => {
ypslide.runTimer = setInterval(ypslide.goleft, ypslide.speed);
},
stop: () => {
if (ypslide.runTimer) {
clearInterval(ypslide.runTimer);
}
},
};
ypslide.init();
window.addEventListener("resize", () => {
ypslide.stop();
ypslide.init();
});
</script>
</body>
</html>

相关推荐