如何使此纯JS轮播展示第一张图片？

Question

我有一个纯粹的JavaScript轮播，可从这里问到的另一个问题中找到（我不拥有此代码的所有权）。

我需要使轮播显示第一张图片，当前正在显示第二张图片，（我对JavaScript的了解不是很好，所以我已经尽力了。）

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

 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(); 

 #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; } 

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

的jsfiddle

Answer 1

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

只需在您的Carousel（）初始调用中添加一个超时：

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

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