Javascript 带背景图像的滑块循环

我有一个容器，其中有5个（或更多）项（div）和另外2个子div，第二个（子）div有一个背景图像（声明为内联样式“background”属性）。现在，我希望所有这些图像（带有背景图像的项目）的无限循环/循环能够工作，经过一次迭代后，第一个图像变为第二个、第二个、第三个。。。第五个变为第一个等，有一定的间隔

我尝试了一些javascript和jquery，但没有成功，有没有办法做到这一点？非常感谢你的帮助

代码是：

    <style type="text/css">
        .container {
          position: relative;
          width: 100%;
          display: -webkit-box;
          display: flex;
        }
        .container .img {
          position: relative;
          width: 240px;
          height: 240px;
        }
        .container .img div {
          position: relative;
          background-size: cover;
          background-position: center;
          width: 240px;
          height: 240px;
          opacity: 0.9;
          cursor: pointer;
        }
        .container .img div:hover {
          opacity: 1;
        }
    </style>
    
    <div id="s" class="container">
        <div class="img">
            <div style="background: url(https://picsum.photos/id/271/240)"></div>
        </div>
        <div class="img">
            <div style="background: url(https://picsum.photos/id/221/240)"></div>
        </div>
        <div class="img">
            <div style="background: url(https://picsum.photos/id/101/240)"></div>
        </div>
        <div class="img">
            <div style="background: url(https://picsum.photos/id/22/240)"></div>
        </div>
        <div class="img">
            <div style="background: url(https://picsum.photos/id/11/240)"></div>
        </div>
    </div>

.集装箱{
位置：相对位置；
宽度：100%；
显示：-网络工具包盒；
显示器：flex；
}
.container.img{
位置：相对位置；
宽度：240px；
高度：240px；
}
.货柜部{
位置：相对位置；
背景尺寸：封面；
背景位置：中心；
宽度：240px；
高度：240px；
不透明度：0.9；
光标：指针；
}
.container.img分区：悬停{
不透明度：1；
}

谢谢，这非常简单，而且（使用jQuery）运行良好。谢谢，这非常简单，而且（使用jQuery）运行良好。

setInterval(function(){ 
$i=$(document).find('.container .img:nth-child(1)'); 
$i.clone().appendTo( ".container" );
$i.remove()}, 5000);