javascript - 制作水平滑动部分？-6ren

javascript - 制作水平滑动部分？

转载作者：行者123 更新时间：2023-11-28 08:10:35

27

4

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如果有任何帮助。

最佳答案

由于当时有点无聊，所以做了一个纯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>

关于javascript - 制作水平滑动部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29291836/

27

4

0

文章推荐： javascript - 捕获 html canvas 不作为 dataURL

文章推荐： c++ - 定义的改变

文章推荐： javascript - 表单验证与独立指令相结合正在删除范围值

文章推荐： c++ - MFC框架中如何使用XML over HTTP实现双向通信

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

javascript - 制作水平滑动部分？