jQuery中的水平选择滑块

Question

我正在尝试创建一个水平选择滑块，可在联系表单内使用它来选择所需的金额。 我已经制作了我想要的原型，但是每当我尝试在HTML / CSS中复制它时，都不会碰运气。 我究竟做错了什么？

原型： https : //i.gyazo.com/acabda5c81a19686a2ae0f7201314c11.mp4

显然，我只希望移动圆角框内的文本，而不是整个页面，因为我是在AdobeXD内构建的。

我无法提供任何有效的代码，因为我什至都无法实现我所期望的目标。 我也环顾了Google，找不到任何涉及“水平选择框”（oe）的信息

我只是在寻找正确的方向，我不想为我编写完整的代码。

（添加了JavaScript标签，因为我认为这是必需的）

Answer 1

我将使用Javascript创建带有左和右（上和下）作为参数的按钮单击事件。 根据参数增加或减少变量，如果变量大于或小于选择的数量，则将“换行”到另一侧。 列出所有价格。

递增或递减变量后，使用该变量引用列表并更改选择器的InnerHTML。

Answer 2

这是您所描述内容的基本实现，您可以进一步介绍。

在实现此效果的方法中，有三个主要键：

1. 这个想法是-在任何时刻-所有可见的元素之前的元素有类hiddenLeft ，而所有，是经过它的那些具有类hiddenRight 。
2. overflow: hidden CSS属性，用于隐藏“隐藏”项目。
3. transform: translateX() CSS属性，该属性允许transition以相应方式为项目设置动画。
   当将hiddenLeft/hiddenRight类添加到元素时，它将在相关方向上转换。 删除它们后，元素将过渡回框的中央，从而过渡到可见区域。

 var current = 1; const initial = 1; // Initialization const contentItems = document.getElementsByClassName('buttonContent'); for (let i = 0; i < contentItems.length; i ++) { if (i < initial) { contentItems[i].classList.add('hiddenLeft'); } else if (i > initial) { contentItems[i].classList.add('hiddenRight'); } } function move(direction) { if (direction < 0 && current < contentItems.length - 1) { contentItems[current].classList.add('hiddenLeft'); contentItems[current + 1].classList.remove('hiddenRight'); current++; } else if (direction > 0 && current > 0) { contentItems[current].classList.add('hiddenRight'); contentItems[current - 1].classList.remove('hiddenLeft'); current--; } } 

 #box { overflow: hidden; width: 200px; height: 100px; border: 1px solid black; display: flex; flex-direction: row; align-items: center; justify-content: space-between } .button { background-color: tomato; padding: 10px; cursor: pointer; } .buttonContent { transform: translateX(0); transition: all 0.5s; } .hiddenLeft { transform: translateX(-200px); } .hiddenRight { transform: translateX(200px); } 

 <div id="box"> <div id="leftButton" class="button" onclick="move(-1)">&#60;</div> <div id="content"> <div class="buttonContent">red</div> <div class="buttonContent">green</div> <div class="buttonContent">blue</div> </div> <div id="rightButton" class="button" onclick="move(1)">&#62;</div> </div>