js360度旋转展示产品

<div class="product-container">
  <img id="productImage" src="product_01.jpg" alt="Product Image">
</div>

.product-container {
  width: 300px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

#productImage {
  width: 100%;
  height: auto;
  transition: transform 0.1s linear;
}

const productImage = document.getElementById('productImage');
let isDragging = false;
let startX, currentTranslate, prevTranslate, animationID, currentIndex = 0;

productImage.addEventListener('mousedown', dragStart);
productImage.addEventListener('mouseup', dragEnd);
productImage.addEventListener('mouseleave', dragEnd);
productImage.addEventListener('mousemove', drag);

function dragStart(event) {
  isDragging = true;
  startX = event.clientX;
  animationID = requestAnimationFrame(animation);
}

function dragEnd() {
  cancelAnimationFrame(animationID);
  isDragging = false;
  const movedBy = currentTranslate - prevTranslate;

  if (movedBy < -10 && currentIndex < 35) currentIndex += 1;
  if (movedBy > 10 && currentIndex > 0) currentIndex -= 1;

  setSliderPosition();
}

function drag(event) {
  if (isDragging) {
    const currentPosition = event.clientX;
    currentTranslate = prevTranslate + currentPosition - startX;
  }
}

function animation() {
  setSliderPosition();
  if (isDragging) requestAnimationFrame(animation);
}

function setSliderPosition() {
  productImage.style.transform = `translateX(${currentTranslate}px)`;
}