如何实现此水平搜索结果栏

i基本上有一个水平div，该div填充了OMDB API的内容。它动态生成了一堆搜索结果，并显示所有结果；但是overflow: hidden处于活动状态。

我有2个问题：

我有两个自定义的"按钮"，我用一个空的div和图标制作。我给了它一个盒子阴影，使它的幻想是徘徊。使用按钮元素是更好的练习，还是重要？
我的主要问题是：我希望能够使用箭头按钮之间在搜索结果之间来回导航。实施此功能的最佳方法是什么？我唯一能想到的是使用按钮调整搜索结果的左或右边缘。(即按下左键将以负边距调整结果的左侧左侧，右箭头将以正余量进行调整(

但是，这感觉很粗糙，不是很准确。含义额外的点击次数，可以将内容完全从视图中推出(无论是偶然还是故意(。

有没有办法更有效地设置此设置？

这是一些代码，例如：

const leftArrow = document.querySelector("#left-arrow");
const rightArrow = document.querySelector("#right-arrow");
const marginSelector = document.querySelector("#nav-margin");
var marginValue = -20;
leftArrow.addEventListener('click', () => {
  marginSelector.style.marginLeft = marginValue + "px";
  marginValue += -20;
});

.scrollbar-container {
  width: 800px;
  display: flex;
  border: 1px #5e9af9 solid;
  position: relative;
  top: 100px;
  overflow: hidden;
  margin: auto;
  align-items: center;
}
.result-container {
  display: inline-block;
  margin: 2px;
}
img {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.nav-button {
  position: absolute;
  width: 50px;
  height: 50px;
  background: rgba(230, 232, 237, .5);
  text-align: center;
  margin: auto 0;
}
.left-arrow {
  left: 1%;
}
.right-arrow {
  right: 1%;
}
.margin-start {}

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<div class="scrollbar-container">
  <div id="nav-margin" class="result-container">
    <img src="https://i.imgur.com/dA3tjxl.gif">
  </div>
  <div class="result-container">
    <img src="https://i.imgur.com/dA3tjxl.gif">
  </div>
  <div class="result-container">
    <img src="https://i.imgur.com/dA3tjxl.gif">
  </div>
  <div class="result-container">
    <img src="https://i.imgur.com/dA3tjxl.gif">
  </div>
  <div class="result-container">
    <img src="https://i.imgur.com/dA3tjxl.gif">
  </div>
  <div class="result-container">
    <img src="https://i.imgur.com/dA3tjxl.gif">
  </div>
  <div class="result-container">
    <img src="https://i.imgur.com/dA3tjxl.gif">
  </div>
  <div id="left-arrow" class="nav-button left-arrow">
    <i class="fas fa-angle-left fa-3x"></i>
  </div>
  <div id="left-arrow" class="nav-button right-arrow">
    <i class="fas fa-angle-right fa-3x"></i>
  </div>
</div>

我已经编写了脚本来来回移动搜索结果。您只需要检查并调整marginSelector的marginLeft值即可。我已经将transition添加到#nav-margin的CSS中，以使其看起来平滑。marginValue用0初始化。为了方便起见，已将容器的max-width设置为500px。当您更改max-width时，请不要忘记将其更改为addEventListener for Rightarrow。如果条件到动态，您也可以在内部进行值，以便实际上从.scrollbar-container中获取值。

让我知道您是否有任何疑问。

const leftArrow = document.querySelector("#left-arrow");
const rightArrow = document.querySelector("#right-arrow");
const marginSelector = document.querySelector("#nav-margin");
var marginRightValue = 0;
rightArrow.addEventListener('click', () => {
  if(-(marginRightValue) <= (500+20))
    marginRightValue += -100;
  marginSelector.style.marginLeft = marginRightValue + "px";
});
leftArrow.addEventListener('click', () => {
  if(marginRightValue < 0)
      marginRightValue += 100;
   marginSelector.style.marginLeft =  marginRightValue + "px";
});

.scrollbar-container {
  max-width: 500px;
  display: flex;
  border: 1px #5e9af9 solid;
  position: relative;
  top: 100px;
  overflow: hidden;
  margin: auto;
  align-items: center;
}
#nav-margin{
  transition: all 1s;
}
.result-container {
  display: inline-block;
  margin: 2px;
}
img {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}
.nav-button {
  position: absolute;
  width: 50px;
  height: 50px;
  background: rgba(230, 232, 237, .5);
  text-align: center;
  margin: auto 0;
  cursor: pointer;
}
.left-arrow {
  left: 1%;
}
.right-arrow {
  right: 1%;
}
.margin-start {}

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<div class="scrollbar-container">
  <div id="nav-margin" class="result-container">
    <img src="https://i.imgur.com/dA3tjxl.gif">
  </div>
  <div class="result-container">
    <img src="https://i.imgur.com/dA3tjxl.gif">
  </div>
  <div class="result-container">
    <img src="https://i.imgur.com/dA3tjxl.gif">
  </div>
  <div class="result-container">
    <img src="https://i.imgur.com/dA3tjxl.gif">
  </div>
  <div class="result-container">
    <img src="https://i.imgur.com/dA3tjxl.gif">
  </div>
  <div class="result-container">
    <img src="https://i.imgur.com/dA3tjxl.gif">
  </div>
  <div class="result-container">
    <img src="https://i.imgur.com/dA3tjxl.gif">
  </div>
  <div id="left-arrow" class="nav-button left-arrow">
    <i class="fas fa-angle-left fa-3x"></i>
  </div>
  <div id="right-arrow" class="nav-button right-arrow">
    <i class="fas fa-angle-right fa-3x"></i>
  </div>
</div>

我不完全确定这是否是最好的响应，但是：

点1-我认为在这里不重要。从语义的角度来看， <button>是为一种形式的。有关更多上下文，请阅读：https：//css-tricks.com/use-button-element/

点2-我已经可以使用鼠标/触控板从左到右(在运行摘要时在代码演示中滚动/滑动。因此，有额外的按钮可以完成这项工作似乎是不必要的。我认为，在单击右键按钮时，宁愿制作一个JavaScript旋转木马(或滑块(，将我带到下一个"幻灯片"或结果的下一部分。然后，当右侧(或左(没有更多内容时，您可以禁用按钮，或者让它们循环回开始。实际上，您想考虑一个固定宽度的"幻灯片"窗口(对不同的视口响应(和"幻灯片"。这对您的问题有意义吗？

相关内容

最新更新

热门标签：