幻燈片左右重複

我想創建一個div，它從屏幕左側向右側反覆移動。我想讓它看起來好像在一個軸上擺動。然而，我有當前的代碼，有時當你加載頁面的div從左到右移動，然後卡住試圖再次移動到右側。幻燈片左右重複

moveBlock: function(){ 
    var madeRight = false; 
    $('.curBlock').css({"left": "2%"}); 
    intv = setInterval(function(){ 
     var curBlock = $('.curBlock'); 
     if(parseInt($(".curBlock")[0].style.left.replace("%", "")) < 42 && parseInt($(".curBlock")[0].style.left.replace("%", "")) > 1 && !madeRight){ 
      console.log("hi"); 
      $('.curBlock').css({"left": parseInt($(".curBlock")[0].style.left.replace("%", "")) + 1+"%"}); 
     }else if(parseInt($(".curBlock")[0].style.left.replace("%", "")) > 1 || parseInt($(".curBlock")[0].style.left.replace("%", "")) == 42){ 
      madeRight = true; 
      $('.curBlock').css({"left": parseInt($(".curBlock")[0].style.left.replace("%", "")) - 1+"%"}); 
     }else{ 
      clearInterval(intv); 
     } 
    }, 50) 
}, 
    processBlock: function(){ 
    setInterval(game.moveBlock(), 1000); 
    }

任何幫助實現這一點將非常感激。

謝謝。 :-)

來源

2015-02-23 Polarize

請發佈相關的HTML和CSS。 – 2015-02-23 06:00:12

對不起，我不想讓帖子變得很大（我是新來的，所以只是習慣了）。整個文件在這裏：http://welfordian.com/game/但是，如果你更喜歡JSFiddle：http://jsfiddle.net/6rvbjmmz/ – Polarize 2015-02-23 06:06:09

考慮CSS動畫：

setTimeout(function() { 
 
    var element = document.getElementById("d1"); 
 
    document.body.appendChild(element.cloneNode(true)); 
 
    element.classList.toggle("sidetoside"); 
 
}, 2500);

@keyframes slide { 
 
    from { 
 
    margin-left: 100%; 
 
    } 
 

 
    to { 
 
    margin-left: 0%; 
 
    } 
 
} 
 

 
.sidetoside { 
 
    -o-animation: slide 2s linear 0s infinite alternate; 
 
    -moz-animation: slide 2s linear 0s infinite alternate; 
 
    -webkit-animation: slide 2s linear 0s infinite alternate; 
 
    animation: slide 2s linear 0s infinite alternate; 
 
}

<div id="d1" class="sidetoside"> 
 
    I'm a div! I move! 
 
    <p> 
 
    I'm more text in the div! 
 
    </p> 
 
</div>

您可以使用AnimationEvent到到動畫的變化，以及作出迴應。

來源

2015-02-23 05:57:07 jdphenix

當使用CSS動畫，如果我使用JS從div中刪除類並給這個類克隆該div將新div（與添加的類）繼續從其他divs位置移動，如果我通過JS設置其當前位置？ – Polarize 2015-02-23 06:01:00

我已經做了一個小編輯，我相信你會發表評論。 – jdphenix 2015-02-23 06:07:20

當我添加webkit關鍵幀時，此功能完美無瑕，但是，克隆的元素不會從舊元素的位置繼承。即我希望新創建的元素從屏幕中間向左移動（如果這是舊元素的位置）。因此，如果舊元素從左向右移動200px，則新元素需要從左邊開始爲200px，然後開始向右移動，而舊元素剛剛停止。我希望這是明確的。上午6:20。 – Polarize 2015-02-23 06:19:09

幻燈片左右重複

回答

相關問題