javascript幻灯片在网站打开时显示所有照片，但在其他情况下不显示

我的JavaScript幻灯片有点不稳定。当我加载页面时，幻灯片放映图片是可见的，但它会在幻灯片放映中显示所有照片

几秒钟后，它会解压成一张照片，并按照预期的方式工作，以5秒的速度浏览每一张照片

然而，无论我做什么，它仍然在开始时显示所有的图片，这违背了这一点

这是我的HTML：

    <div class="container">
            <div style="display: inline-block; ">
                <img class="mySlides" src="../images/fullshot1.jpg">
            </div>
            <div style="display: inline-block; ">
                <img class="mySlides2" src="../images/unnamed.jpg">
            </div>
            <div style="display: inline-block; ">
                <img class="mySlides3" src="../images/fullshot2.jpg">
            </div>
        </div>

---

有谁能帮我解决这个问题吗？谢谢

初始加载时不会隐藏未激活的项目。只有在第一个

autoSlide

间隔触发后，当

cycleItems

首次运行时，它们才会隐藏。添加另一个

cycleItems（）

在

$（文档）的末尾。准备好了
功能，它可以在加载时正确设置所有内容。非常感谢！！！这就像while和do-while循环一样，其中一个在尝试命令之前运行一次，而另一个只运行一次？类似的原理
cycleItems
将仅在
3000ms
之后第一次运行，因此需要额外的显式调用来立即启动它。
$(document).ready(function() {
 console.log( "document loaded" );

//declare section variables
var currentIndex = 0,
items = $('.container div'),
itemAmt = items.length;

//how to click and make it work
function cycleItems() {
 var item = $('.container div').eq(currentIndex);
  items.hide();
   item.css('display','inline-block');
}
//interval time
 var autoSlide = setInterval(function() {
  currentIndex += 1;
   if (currentIndex > itemAmt - 1) {
   currentIndex = 0;
   }

cycleItems();
}, 3000);

//this closes the doc ready
});