我如何让这个纯JS旋转木马显示第一张图片？

Question

我从here提出的另一个问题中找到了这个纯粹的JavaScript轮播（我没有接受此代码的所有权）。

我需要让旋转木马显示第一个图像，它显示当前的第二个图像，（我对JavaScript的了解并不是那么好，所以我已尽力而为）。

（这仅适用于拼贴画的项目。）

＆＃13;

＆＃13;

var firstval = 0;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

JSFIDDLE

Answer 1

这是一个非常简单的解决方案

只需在初次调用Carousel（）时添加超时：

setTimeout(function(){
    Carousel();
}, 3000);

工作小提琴：https://jsfiddle.net/wzkLjh8s/6/