带有纯 JavaScript 的简单轮播中的 appendChild 方法

Question

我正在尝试从头开始制作一个简单的 JavaScript 旋转木马。

CSS

#wrapper{
    position: relative;
    width: 450px;
    height: 150px;
    margin: 0 auto;
    overflow: hidden;
}
#container{
    position: absolute;
    width: 450px;
    height: 150px;
}
.child{
    width: 150px;
    height: 150px;
    padding-top: 35px;
    float: left;
    text-align: center;
    font-size: 60px;
}
#a{ background: #FF0000; }
#b{ background: #FFFF00; }
#c{ background: #00FFFF; }

HTML

<div id="wrapper">
    <div id="container">
        <div id="a" class="child">a</div>
        <div id="b" class="child">b</div>
        <div id="c" class="child">c</div>
    </div>
</div>

JS

var firstval = 0;
function Carousel(){
    firstval += 2;
    parent = document.getElementById( 'container' );
    parent.style.left = "-" + firstval + "px";
    if( !( firstval % 150 ) ){
        setTimeout(Carousel, 3000);
        firstval = 0;
        var firstChild = parent.firstChild;
        parent.removeChild( firstChild );
        parent.appendChild( firstChild );
        return;
    }
    runCarousel = setTimeout(Carousel, 20);
}
Carousel();

到现在，循环是这样的：

a b c
b c -
c a -
a b -

我认为追加和计时有问题。

问题

我做错了什么？我应该以其他方式使用 appendChild 和 removeChild 方法吗？

Answer 1

我过去创建了一个符合您条件的轮播，您可以在这里找到它 https://github.com/luckyape/lucky-carousel/blob/master/lucky-carousel.js

希望对您有所帮助。

Answer 2

更改此行：

var firstChild = parent.firstChild;

… 对此：

var firstChild = parent.firstElementChild;

否则，您有时会抓取空白文本节点。

不需要下面的代码，因为appendChild会自动移动firstChild:

parent.removeChild( firstChild );

最后，在这里将容器的左边重置为0：

parent.appendChild(firstChild);
parent.style.left= 0;

否则，-150px 偏移量将导致第二个子项在第一个附加到父项时消失在屏幕外。

Fiddle

带有纯 JavaScript 的简单轮播中的 appendChild 方法

appendChild method in a simple carousel with pure JavaScript

javascript

carousel

问题