横排跳转页面html css

实现横向跳转页面可以使用CSS3的transform属性，结合JavaScript来实现。代码如下：

HTML代码：

<div class="container">
  <div class="page page1">
    <h1>页面1</h1>
  </div>
  <div class="page page2">
    <h1>页面2</h1>
  </div>
  <div class="page page3">
    <h1>页面3</h1>
  </div>
</div>

CSS代码：

.container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.page {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}

.page1 {
  background-color: red;
}

.page2 {
  background-color: blue;
}

.page3 {
  background-color: green;
}

JavaScript代码：

var pages = document.querySelectorAll('.page');
var container = document.querySelector('.container');

var pageIndex = 0;

function setTransform() {
  container.style.transform = `translateX(-${pageIndex * 100}%)`;
}

setTransform();

document.addEventListener('keydown', function(event) {
  switch (event.keyCode) {
    case 37: // left
      pageIndex--;
      if (pageIndex < 0) {
        pageIndex = pages.length - 1;
      }
      setTransform();
      break;
    case 39: // right
      pageIndex++;
      if (pageIndex >= pages.length) {
        pageIndex = 0;
      }
      setTransform();
      break;
    default:
      break;
  }
});

以上代码实现了一个简单的横向跳转页面效果，通过键盘左右方向键来控制页面的跳转。