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';

但是，什么情况是，它的确被滑到右侧或左侧，但它最终再次返回到原来的位置。

我怎样才能保持它在未来的位置？

在此先感谢。

来源

2015-10-16 JohnAndrews

使用“1 slidyleft前锋”或“1 slidyright前锋”的JS –

那肯定工程：

var elem = document.getElementById("sliderfigure"); elem.style.animation = '1s slidyright forwards';

更多相关信息请参见本，然而，在按下它“正确”（并且它工作正常）之后，那么如何使它当我按下“左”时从那个新位置开始，而不是原始位置 – JohnAndrews

这不会起作用，因为当你按下左边时，左边的属性设置为0，然后将其设置为-2 0vw左转。使用transform：translate（）来代替。 –

由于您未指定animation-fill-mode，因此默认值为none。但要保持在动画的100％状态，您需要forwards。

所以，你可以写你的动画是这样的： https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

来源

2015-10-16 11:53:23 ylerjen

开始工作很好，只有两个问题：我怎样才能让用户可以按两次（所以先+ 20vw然后再+20vw），但封顶的长度滑块。另外你怎么做到，当按右键然后左键时，左边从当前位置开始，而不是元素的原始位置？ – JohnAndrews

CSS动画从开始帧运行到结束帧。所以在你的情况下，它将从每次点击时的0开始。如果您希望它以增量方式移动，则不应使用动画。您可以使用FarzadYZ所说的转换，或者直接使用具有左/右属性的位置。翻译似乎更容易通过。 – ylerjen

看到这个：http://jsfiddle.net/92e7z4r1/ – ylerjen

Javascript动作将滑块滑动到左侧或右侧

回答

相关问题