Question

Here就是我想要创建的一个例子。

我试图在我自己的页面上创建一个类似于3段的页面。我只希望一次显示1个段落，我希望左右箭头分别带我到前一段和下一段。

我不确定如何一次只显示一个段落（我将它们全部放在一个容器中，我假设我必须对此做些什么），而且我不会＆＃ 39;我真的知道如何从水平滑动开始（我假设我需要用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如果有任何帮助。

Answer 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>

制作水平滑动部分？

1 个答案: