html +css+jq实现左边一个箭头中间内容右边一个箭头，切换内容

可以尝试使用以下 HTML 和 CSS 代码实现左右箭头切换内容的效果：

<div class="arrow-container">
  <div class="arrow left-arrow"></div>
  <div class="content">这里是内容</div>
  <div class="arrow right-arrow"></div>
</div>

.arrow-container {
  display: flex;
  align-items: center;
}

.arrow {
  width: 30px;
  height: 30px;
  border: 1px solid black;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  cursor: pointer;
}

.left-arrow {
  margin-right: 10px;
}

.right-arrow {
  margin-left: 10px;
  transform: rotate(-135deg);
}

.content {
  flex: 1;
  text-align: center;
  font-size: 24px;
}

.hidden {
  display: none;
}

然后使用 jQuery 实现左右箭头切换内容的效果：

$(function() {
  var contents = ['这里是内容1', '这里是内容2', '这里是内容3'];
  var currentIndex = 0;
  $('.content').text(contents[currentIndex]);
  
  $('.left-arrow').click(function() {
    currentIndex--;
    if (currentIndex < 0) {
      currentIndex = contents.length - 1;
    }
    $('.content').text(contents[currentIndex]);
  });
  
  $('.right-arrow').click(function() {
    currentIndex++;
    if (currentIndex >= contents.length) {
      currentIndex = 0;
    }
    $('.content').text(contents[currentIndex]);
  });
});

其中 `contents` 数组中存储了需要切换的内容，`currentIndex` 变量表示当前显示的内容在数组中的索引。左右箭头被点击时，根据当前索引修改 `currentIndex` 的值，然后更新显示的内容。