带有背景图像的滑块循环

Question

我有一个容器，里面有 5 个（或更多）项目 (divs) 和另外 2 child divs，第二个 (child) div 有一张背景图片（声明为 inline-style“背景”属性）。现在，我想要所有这些图像（带有背景图像的项目）的无限 cycle/loop 工作，在一次迭代后第一个变成第二个，第二个第三个...第五个变成第一个等等，有一些间隔。

我尝试了一些 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);

带有背景图像的滑块循环

Slider loop with backgroud image

javascript

jquery

loops

slider

setinterval