在vue2项目开发过程中用到了走马灯的组件（UI库用的ElementUI），开发过程中需求没有明确要求可以鼠标滑动切换，但是在提交测试后，测试同学提了一个问题，想要鼠标切换实现滑动效果，查看官方文档没有鼠标可以切换的事件，于是就想自己实现一个这种效果，因为我的项目是放在VR一体机里面的，所以这个是左右滑动手柄（即鼠标）切换下一张和上一张，所以判断当垂直滚动时忽略事件
主要代码：
slideBanner() {
let that = this;
//获取走马灯组件
var box = document.querySelector(".el-carousel__container");
box.addEventListener("wheel", (e) => {
if (e.deltaY != 0) {
//判断 如果是垂直滚动则忽略本次事件
return;
}
//使用一个标识来判断当前是否正在切换轮播图，防止切换时抖动
if (that.isMovingBanner) {
return;
}
//切换时停止自动切换效果
that.autoplay = false;
if (e.deltaX < 0 || e.detail < 0) {
//向左滑动
that.isMovingBanner = true;
that.$refs.carousel.next();
} else {
//向右滑动
that.isMovingBanner = true;
that.$refs.carousel.prev();
}
setTimeout(() => {
that.isMovingBanner = false;
that.autoplay = false;
}, 400);
});
}
