Question

我需要模拟一个从左到右连续移动的乐队，在它上面携带15个div并将它们移动成一个圆圈，就像一个旋转木马。当它们到达右边缘以从左侧出现时。

我的代码适用于1 div（或多或少），但我在制作包含所有15个div的循环时遇到了麻烦。

我错过了什么？

这是我到目前为止所拥有的：

HTML

<body>
<div id="fooObject0">1</div>
<div id="fooObject1">2</div>
....
<div id="fooObject13">14</div>
<div id="fooObject14">15</div>
</body>

CSS

body {
font:76% normal verdana,arial,tahoma;
width:600px;
height:600px;
position:relative;
margin:0 auto;
border:1px solid;
}

div {
position:absolute;
left:0px;
top:8em;
width:55px;
height:70px;
line-height:3em;
background:#99ccff;
border:1px solid #003366;
white-space:nowrap;
padding:0.5em;
}

的javascript

var foo = null; // object


function doMove(id) {

    foo = document.getElementById(id);

    foo.style.left = parseInt(foo.style.left)+1+'px';
    setTimeout(doMove(id),20); // call doMove in 20msec

    if(foo.style.left == "600px") {
        foo.style.left = 0;
    }

}

function init() {

    for(i=0;i<15;i++){
        var foo = document.getElementById('fooObject' + i); // get the "foo" object
          foo.style.left = -i*55+'px'; // set its initial position to 0px
          doMove('fooObject' + i); // start animating
          console.log('fooObject' + i);
      }

}


window.onload = init;

提前谢谢！

Answer 1

调用无效函数setTimeout(doMove(id), 20);。

doMove(id)返回undefined，或者您使用＆＃34;共享var＆＃34; （Orientad对象）或doMove需要返回其他function。

注意：var foo = null; // object此变量在使用setTimeout或setInterval

时会导致冲突

试试这个（在代码中阅读我的评论）：

function doMove(id) {
    return function() {
        var foo = document.getElementById(id);//Global variable causes conflict when using `setTimeout` or `setInterval`

        foo.style.left = parseInt(foo.style.left)+1+'px';
        setTimeout(doMove(id),20); //setTimeout need an valid function

        if(foo.style.left == "600px") {
            foo.style.left = 0;
        }
    }
}

function init() {

    for(i=0;i<15;i++){
        var foo = document.getElementById('fooObject' + i);
          foo.style.left = -i*55+'px';
          doMove('fooObject' + i)(); //doMove need "()", because not run "direct"
          console.log('fooObject' + i);
      }

}

我修改了效果代码＆＃34; carousel＆＃34;并使用＆＃34; left＆＃34;解决问题。（在1到5格）：

function carrousel() {
    var numberOfItems = 15; //Change this if needed
    var delay = 1; //Change delay time if needed
    var limitArea = 599; //Size limit your carousel area (600px, used 599 for limit with `>`)
    var sizeObject = 58; //Width size of objects

    //Don't change
    var index = 0; //Current index
    var allItems = []; //Indexed objects

    //Get and index all objects
    for(index = 0; index < numberOfItems; index++){//user var
        allItems[index] = document.getElementById("fooObject" + index);
    }

    //Convert position left for int and detect "NaN"
    var getPosition = function(pos) {
        pos = parseInt(pos);

        if (isNaN(pos)) {
            return parseInt(-(index * sizeObject));
        } else {
            return parseInt(pos + 1);
        }
    };

    var doMoveAll = function() {
        var foo, post;

        for(index = 0; index < numberOfItems; index++){//user var
            foo = allItems[index];//Current object

            pos = getPosition(foo.style.left);//Get position

            //Detect if object are in out area
            if(pos > limitArea) {
                var beforeItem;

                //Get before object for effect carousel
                switch(index + 1) {
                    case 1:
                        beforeItem = "fooObject" + (numberOfItems - 1);
                    break;
                    default:
                        beforeItem = "fooObject" + (index - 1);
                }

                //Get position again, but used before object
                pos = (
                    getPosition(document.getElementById(beforeItem).style.left) - sizeObject
                );
                foo.style.left = pos + "px";
            } else {
                foo.style.left = pos + "px";
            }
        }

        //Timeout delay
        window.setTimeout(doMoveAll, delay);
    };
    doMoveAll();//Init
};
window.onload = carrousel;

使用javascript或jQuery创建移动div的无限循环

1 个答案: