js实现登陆注册左中右三个部分的左右滑动，中间部分为一张图片

实现登陆注册左中右三个部分的左右滑动，可以使用 JavaScript 和 CSS 来实现。

首先，需要在 HTML 中创建三个部分的容器，并将它们放在一个父容器中。中间部分要放置一张图片，可以使用 img 标签来实现，如下所示：

<div class="container">
  <div class="left"></div>
  <div class="middle">
    <img src="your-image-url" />
  </div>
  <div class="right"></div>
</div>

接下来，使用 CSS 将三个容器水平排列，并设置它们的宽度和高度，如下所示：

.container {
  display: flex;
  height: 100%;
}

.left,
.middle,
.right {
  flex: 1;
  height: 100%;
}

.middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

.middle img {
  max-width: 100%;
  max-height: 100%;
}

这样，左中右三个部分就排列好了，接下来使用 JavaScript 来实现滑动效果。可以使用鼠标滚轮或者触摸事件来触发滑动效果。

首先，需要获取容器和中间部分的宽度，以及鼠标或手指滑动的距离。然后，根据滑动的距离来计算左右容器和中间容器的偏移量，并使用 CSS 的 transform 属性来设置它们的位置。具体实现如下：

const container = document.querySelector('.container');
const left = document.querySelector('.left');
const middle = document.querySelector('.middle');
const right = document.querySelector('.right');

const middleWidth = middle.offsetWidth;
const containerWidth = container.offsetWidth;
const maxOffset = middleWidth / 2;

let startX = 0;
let currentX = 0;

container.addEventListener('mousedown', handleStart);
container.addEventListener('mousemove', handleMove);
container.addEventListener('mouseup', handleEnd);
container.addEventListener('mouseleave', handleEnd);

container.addEventListener('touchstart', handleStart);
container.addEventListener('touchmove', handleMove);
container.addEventListener('touchend', handleEnd);

function handleStart(event) {
  startX = event.clientX || event.touches[0].clientX;
}

function handleMove(event) {
  const clientX = event.clientX || event.touches[0].clientX;
  currentX = clientX - startX;

  if (currentX < 0) {
    // move to right
    const offset = Math.min(maxOffset, Math.abs(currentX));
    left.style.transform = `translateX(${-offset}px)`;
    middle.style.transform = `translateX(${middleWidth - offset}px)`;
    right.style.transform = `translateX(${containerWidth - offset}px)`;
  } else {
    // move to left
    const offset = Math.min(maxOffset, currentX);
    left.style.transform = `translateX(${-containerWidth + offset}px)`;
    middle.style.transform = `translateX(${-maxOffset + offset}px)`;
    right.style.transform = `translateX(${maxOffset + offset}px)`;
  }
}

function handleEnd() {
  left.style.transform = '';
  middle.style.transform = '';
  right.style.transform = '';
}

这样，就实现了登陆注册左中右三个部分的左右滑动效果。