带有背景图像的滑块循环

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(){&nbsp; $i=$(document).find('.container&nbsp;.img:nth-child(1)');&nbsp; $i.clone().appendTo(&nbsp;".container"&nbsp;); $i.remove()},&nbsp;5000);