使用javascript中的数组循环css div

Question

这段代码直接指向数组的最后一个位置，我想要的是迭代或循环遍历它们，并在最后一个位置转到数组的第一个位置。我尝试了其他的东西，但它在Firefox中解析了左边的错误。这是代码小提琴Demo。

体：

 <div id="placeDiv">ok</div>
 <script>
    var times = ["2px","2000px","200px","12px","20px","200px","2000px"];
    var move=times;             
    var i=0;
    if(i == move.length-1) 
    {i=0;}
    else
    {i=i+1;};
    document.getElementById("placeDiv").style.left=move[i];
 </script>

的CSS：

<style>#placeDiv{position:absolute;top:0px;width:100px;height:100px;background-color:purple}</style>

此代码不起作用：

    var times = [];
    for (var i = 0; i < 30000; i++) {
        times.push("\""+i+"px\"");
 }   var move=times;             
         if(i == move.length-1) 
     {i=0;}
     else
     {i=i+1;};
document.getElementById("placeDiv").style.left=move[i];

使用上面的代码我在firefox中遇到这个错误： 解析＆＃39; left＆＃39;的值时出错。声明被撤销。

Answer 1

您需要在此处使用setTimeout。例如：

var times = ["2px", "20px", "30px", "12px", "20px", "200px", "20px"],
    move = 0,
    div = document.getElementById("placeDiv");

setTimeout(function next() {
    div.style.left = times[move++ % times.length];
    setTimeout(next, 1000)
}, 1000);

要循环数组值，使用%运算符非常有用。

演示：http://jsfiddle.net/m6w6K/1/

或setInterval：

function makeMove() {
    div.style.left = times[move++ % times.length];
}

setInterval(makeMove, 1000);

演示：http://jsfiddle.net/m6w6K/4/

Answer 2

试试这个：

function sleep(millis, callback) {
    setTimeout(function()
            { callback(); }
    , millis);
}

var times = ["2px","20px","20px","12px","20px","2000px","20px"];
var move=times;     
var i=0;

(function foobar_cont(){
        if(i == move.length-1) {i=0;}
        else {i=i+1;};
        document.getElementById("placeDiv").style.left=move[i];
        sleep(1000, foobar_cont);
})();

Demo

Answer 3

我采用了dfsq的原始答案，并添加了一些调料：

$(div).animate({left: times[move++ % times.length]}, 500);

<强> Demo

Answer 4

您的代码中存在语法错误... Link。它对我来说效果很好但是......“时间”或过渡对用户来说是不可见的......导致它快速。 ：）

 <div id="placeDiv">ok</div>
 <script>
    var times = ["2px","2000px","200px","12px","20px","200px","2000px"];
    var move=times;             
    var i=0;
    if(i == move.length-1) 
    {i=0;}
    else
    {i=i+1;}
    document.getElementById("placeDiv").style.left=move[i];
 </script>