制作水平滑动部分？答案

【问题标题】：Making horizontal sliding sections?制作水平滑动部分？
【发布时间】：2015-05-31 06:12:51
【问题描述】：

Here 正是我正在尝试创建的示例。

我尝试自己创建一个页面，该页面具有 3 个段落。我只希望一次显示 1 段，我希望左右箭头分别将我带到上一段和下一段。

我不确定如何一次只显示一个段落（我将它们全部放在一个容器中，我假设我必须对此做些什么），我真的不知道如何从水平滑动开始（我假设我需要用 JS 做一些事情）。

这是我目前所拥有的：

HTML：

<body>
  <div class="slide_container">
    <p id="slide1" class="slide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p id="slide2" class="slide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p id="slide3" class="slide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <button id="prev">←</button>
    <button id="next">→</button>
  </div>
</body>

CSS：

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

.slide_container {
  width: 960px;
  margin: 0 auto;
  font-family: 'Open Sans';
}
#prev, #next {
  border: none;
  padding: 10px 20px;
  background-color: #efefef;
  color: #c2c2c2;
  transition: background .2s ease-in-out;
}
#prev:hover, #next:hover {
  background: #dedede;
  cursor: pointer;
}
#prev:focus, #next:focus {
  outline: none;
}
#prev {
  float: left;
  margin-left: 400px;
}
#next {
  float: right;
  margin-right: 400px;
}

JavaScript：

var prev = document.getElementById('prev');
var next = document.getElementById('next');

prev.addEventListener('click', function() {
  // Somehow to go to the previous slide
});

next.addEventListener('click', function() {
  // Somehow to go to the next slide
});

任何帮助将不胜感激！

编辑：Here is the jsfiddle 如果有帮助的话。

【问题讨论】：

如果可以，我会推荐 jQuery 或其他一些 JavaScript 库。制作您想要的动画需要大量难以辨认的代码。 .animate()

标签： javascript html css

【解决方案1】：

由于我当时有点无聊，所以我做了一个纯 CSS 的解决方案。它与您所追求的动画风格不太匹配，因为前一帧不会向左移动，但这只是一个概念证明。
如果我没记错的话，Firefox 不会为输入设置样式，因此您可以为此使用一些额外的元素，例如，请参阅this question。

* {
  box-sizing: border-box;
}
body,
html {
  height: 100%;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
}
input[type="checkbox"] {
  display: none;
  z-index: 3;
  position: absolute;
  right: 0;
  top: 50px;
  width: 100px;
  height: 100px;
}
input[type="checkbox"]:first-of-type {
  display: block;
}
input[type="checkbox"]:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: blue;
}
input[type="checkbox"]:checked {
  left: 0;
}
input[type="checkbox"]:checked + div + input[type="checkbox"] {
  display: block;
}
input[type="checkbox"]:checked:before {
  background: red;
}
.frame {
  width: 100%;
  height: 100%;
  position: absolute;
  right: -100%;
  background: white;
  z-index: 2;
  transition: all 0.6s ease;
}
.frame:nth-child(4n + 1) {
  background: lightgray;
}
.frame:first-child {
  right: 0;
  z-index: 1;
}
input[type="checkbox"]:checked + .frame {
  right: 0;
}

<div class="frame">First</div>
<input type="checkbox" />
<div class="frame">Second</div>
<input type="checkbox" />
<div class="frame">Third</div>
<input type="checkbox" />
<div class="frame">Fourth</div>

【讨论】：