带有背景图像的滑块循环

Question

我有一个容器，其中有 5 个（或更多）项目（div）和另外 2 个子 div，第二个（子）div 有一个背景图像（声明为内联样式“背景”属性）。现在，我希望所有这些图像（具有背景图像的项目）的无限循环/循环能够工作，在一次迭代之后，第一个成为第二个，第二个第三个......第五个成为第一个等等，有一定的间隔。我尝试了一些 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>

Answer 1

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