Jquery 每个循环 delay/interval 应用数组的内联样式更改。环形

Question

我不是很擅长 JavaScript 但我决心解决这个问题，但是结合无限循环、数组和带有延迟的内联样式更改已证明超出了我的小脑袋。

本质上，我正在尝试构建一个难以置信的轻量级 slider/carousel。幻灯片水平排列，只有一张可以看到。每隔几秒钟，容器上的左侧位置就会发生变化。

转换是通过 CSS 完成的，所以我需要做的就是遍历一个数组，该数组包含将它们顺序应用于容器的左侧位置值。

我设置了 fiddle 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是这个，容器有class“客户评价”

<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>

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

它无限循环也很重要。

Answer 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)

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

Answer 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)

Jquery 每个循环 delay/interval 应用数组的内联样式更改。环形

Jquery each loop with delay/interval applying inline style change from array. Looped

jquery

arrays

each