js左右点击导航栏插件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航栏插件示例</title>
<style>
  .nav-container {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  .nav-items {
    display: flex;
    transition: transform 0.3s ease-in-out;
  }
  .nav-item {
    min-width: 100px;
    text-align: center;
    padding: 10px;
    border: 1px solid #ccc;
  }
  .nav-buttons {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .prev-btn, .next-btn {
    padding: 10px;
    cursor: pointer;
  }
</style>
</head>
<body>

<div class="nav-container">
  <div class="nav-items" id="navItems">
    <div class="nav-item">导航项1</div>
    <div class="nav-item">导航项2</div>
    <div class="nav-item">导航项3</div>
    <div class="nav-item">导航项4</div>
  </div>
  <div class="nav-buttons">
    <div class="prev-btn" onclick="moveLeft()">Prev</div>
    <div class="next-btn" onclick="moveRight()">Next</div>
  </div>
</div>

<script>
  let currentIndex = 0;
  const items = document.querySelectorAll('.nav-item');
  const totalItems = items.length;
  const navItemsContainer = document.getElementById('navItems');

  function moveLeft() {
    if (currentIndex > 0) {
      currentIndex--;
      updatePosition();
    }
  }

  function moveRight() {
    if (currentIndex < totalItems - 1) {
      currentIndex++;
      updatePosition();
    }
  }

  function updatePosition() {
    const offset = -currentIndex * 100;
    navItemsContainer.style.transform = `translateX(${offset}%)`;
  }
</script>

</body>
</html>