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動作將滑塊滑動到左側或右側

回答

相關問題