我有一个容器，其中有 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>
1 回答
青春有我
TA贡献1784条经验 获得超8个赞
setInterval(function(){
$i=$(document).find('.container .img:nth-child(1)');
$i.clone().appendTo( ".container" );
$i.remove()}, 5000);添加回答
举报
0/150
提交
取消