时间戳

首页 > 解决方案 > 带有背景图像的滑块循环

javascript - 带有背景图像的滑块循环

问题描述

我有一个容器，里面有 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>

标签： javascriptjqueryloopsslidersetinterval

解决方案

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

推荐阅读