Javascript动作将滑块滑动到左侧或右侧
我正在用JS/CSS构建自定义滑块。到目前为止,我有以下几点:Javascript动作将滑块滑动到左侧或右侧
body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img {
min-width: 215px;
width: 20vw;
height: auto;
float: left;
margin-right: 5px;
}
div#slider figure {
position: relative;
width: 140vw;
min-width: 1535px !important;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
/* animation: 30s slidy infinite; */
}
@keyframes slidyleft {
0% { left: 0%; }
100% { left: -20vw; }
}
@keyframes slidyright {
0% { left: 0%; }
100% { left: 20vw; }
}
我用它如下:
<div id="slider">
<figure id="sliderfigure">
<img src="image1.png">
<img src="image1.png">
<img src="image1.png">
<img src="image1.png">
<img src="image1.png">
</figure>
</div>
在我的角码,我有一个按钮,调用滑块如下滑到左边或右边:
var elem = document.getElementById("sliderfigure");
elem.style.animation = '1s slidyleft';
var elem = document.getElementById("sliderfigure");
elem.style.animation = '1s slidyright';
但是,什么情况是,它的确被滑到右侧或左侧,但它最终再次返回到原来的位置。
我怎样才能保持它在未来的位置?
在此先感谢。
由于您未指定animation-fill-mode
,因此默认值为none
。 但要保持在动画的100%状态,您需要forwards
。
所以,你可以写你的动画是这样的: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
开始工作很好,只有两个问题:我怎样才能让用户可以按两次(所以先+ 20vw然后再+20vw),但封顶的长度滑块。另外你怎么做到,当按右键然后左键时,左边从当前位置开始,而不是元素的原始位置? – JohnAndrews
CSS动画从开始帧运行到结束帧。所以在你的情况下,它将从每次点击时的0开始。如果您希望它以增量方式移动,则不应使用动画。您可以使用FarzadYZ所说的转换,或者直接使用具有左/右属性的位置。翻译似乎更容易通过。 – ylerjen
看到这个:http://jsfiddle.net/92e7z4r1/ – ylerjen
使用“1 slidyleft前锋”或“1 slidyright前锋”的JS –
那肯定工程:
更多相关信息请参见本,然而,在按下它“正确”(并且它工作正常)之后,那么如何使它当我按下“左”时从那个新位置开始,而不是原始位置 – JohnAndrews
这不会起作用,因为当你按下左边时,左边的属性设置为0,然后将其设置为-2 0vw左转。使用transform:translate()来代替。 –