Jquery 每个循环延迟/间隔应用数组的内联样式更改。循环的

Posted 2023-05-09

【中文标题】Jquery 每个循环延迟/间隔应用数组的内联样式更改。循环的

【英文标题】：Jquery each loop with delay/interval applying inline style change from array. Looped

【发布时间】：2020-03-15 03:08:56

【问题描述】：

我不太擅长 javascript，但我决心解决这个问题，但是将无限循环、数组和带有延迟的内联样式更改相结合已经超出了我的想象。

基本上我正在尝试构建一个非常轻量级的滑块/旋转木马。幻灯片水平排列，只有一张可以看到。每隔几秒钟，容器上的左侧位置就会改变。

过渡是通过 CSS 完成的，所以我需要做的就是循环遍历一个数组，其中包含将它们顺序应用到容器的左侧位置值。

我已经设置了一个小提琴here。

这是我对 jQuery 的了解...

function slides() 
    var position = [ "0", "-100%", "-200%", "-300%" ];
    var time = 2000;
    $.each(position, function (index, value) 
        $('.testimonials').css('left', value);
    , time);
    time += 2000;

html 是这样的，容器有类“testimonials”

<div>
  <ul class="testimonials" style="left:0">
    <li>We love them. They are super duper.</li>
    <li>They make me feel magical. Like a flying badger.</li>
    <li>At one point they held my organ.</li>
    <li>Cor blimey, what a service they provide.</li>
  </ul>
</div>

值必须来自数组，因为这是根据幻灯片的数量动态生成的。

无限循环也很重要。

【参考方案1】：

您可以使用递归函数，这是一个适合您的代码的示例：

var position = [ "0", "-100%", "-200%", "-300%" ];
var time = 500;
i=0;
function slides(currentPosition) 
setTimeout(function()
        $('.testimonials').css('left', currentPosition);
        slides(position[i%position.length])
        console.log(i)
        i++;
        ,time)

slides(0)

但这只是为了让您了解如何编写一个无限循环来为幻灯片制作动画，当然您需要进一步重新排列它以获得您想要的结果。

【讨论】：

我认为不需要进一步的重新排列？这解决了它，我所做的唯一调整是删除time += 500;，因为这似乎增加了每次通过的延迟。如果延迟保持不变，那很好。非常感谢您花时间回复。最终代码如下...

【参考方案2】：

感谢@mondersky，这似乎得到了回答。最终代码如下：

var position = [ "0", "-100%", "-200%", "-300%" ];
var delay = 2000;
i=0;
function slides(currentPosition) 
    setTimeout(function()
    $('.testimonials').css('left', currentPosition);
    slides(position[i%position.length])
    i++;
  ,delay)

slides(0)