问题

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

更改此行：

var firstChild = parent.firstChild;

......对此：

var firstChild = parent.firstElementChild;

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

您不需要以下代码，因为appendChild会自动移动firstChild：

parent.removeChild( firstChild );

最后，将容器的左侧重置为0：

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

否则，-150px偏移将导致第二个孩子在第一个孩子被附加到父母身上时消失。

Fiddle

Answer 2

我过去创建的旋转木马符合您的条件，您可以在此处找到https://github.com/luckyape/lucky-carousel/blob/master/lucky-carousel.js

希望有所帮助。

appendChild方法在一个简单的轮播中使用纯JavaScript

问题

2 个答案: