CSS實(shí)現(xiàn)左右箭頭換一批的方法

在CSS中，我們可以使用偽元素和動(dòng)畫(huà)來(lái)實(shí)現(xiàn)左右箭頭換一批的功能，以下是一個(gè)簡(jiǎn)單的示例：

HTML結(jié)構(gòu)：

<div class="container">
  <div class="left-arrow"></div>
  <div class="right-arrow"></div>
  <div class="content">
    <ul>
      <li>項(xiàng)目1</li>
      <li>項(xiàng)目2</li>
      <li>項(xiàng)目3</li>
      <li>項(xiàng)目4</li>
      <li>項(xiàng)目5</li>
    </ul>
  </div>
</div>

CSS樣式：

.container {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}
.left-arrow, .right-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: #333;
  border-radius: 50%;
}
.left-arrow {
  left: 10px;
}
.right-arrow {
  right: 10px;
}
.content {
  position: relative;
  width: 600px; /* 假設(shè)有6個(gè)項(xiàng)目，每個(gè)項(xiàng)目50px */
  height: 200px;
  overflow: hidden;
}
.content ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 600px; /* 假設(shè)有6個(gè)項(xiàng)目，每個(gè)項(xiàng)目50px */
  height: 200px;
  list-style: none;
  padding: 0;
  margin: 0;
}

我們可以使用JavaScript來(lái)控制箭頭的點(diǎn)擊事件，從而實(shí)現(xiàn)換一批的功能，以下是一個(gè)簡(jiǎn)單的JavaScript示例：

document.querySelector('.left-arrow').addEventListener('click', function() {
  var content = document.querySelector('.content');
  var ul = content.querySelector('ul');
  var items = ul.children.length; // 獲取項(xiàng)目總數(shù)
  var currentItem = ul.style.left || 0; // 獲取當(dāng)前項(xiàng)目的位置（假設(shè)初始位置為0）
  var nextItem = (currentItem + items * 50) % (items * 50); // 計(jì)算下一個(gè)項(xiàng)目的位置（每個(gè)項(xiàng)目50px）
  ul.style.left = nextItem + 'px'; // 更新下一個(gè)項(xiàng)目的位置（假設(shè)初始位置為0）
});