Javascript 如何循环浏览列表并添加图像

我有一个包含6个图像的工件数组

var artifacts = [
  'http://placehold.it/50x150',
  'http://placehold.it/100x125',
  'http://placehold.it/150x100',
  'http://placehold.it/200x50',
  'http://placehold.it/150x75',
  'http://placehold.it/100x100'
];

我试图将一个工件作为背景图像添加到列表中的每个列表项中

<ul class="slick-dots">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>

一,
二,
三,
四,
五,
六,
七,
八,
九,
十,

如果列表中的工件数量超过该数量，它将从开始处开始，并将工件添加到数组的[0]位置

出于某种原因，我无法思考如何使用javascript实现这一点

Codepen:

使用内部迭代的回调方法。其中第一个参数是index，并基于该值从数组中获取css属性值

var工件=[
'http://placehold.it/50x150',
'http://placehold.it/100x125',
'http://placehold.it/150x100',
'http://placehold.it/200x50',
'http://placehold.it/150x75',
'http://placehold.it/100x100'
];
$（'ul.slick-dots li'）.css（'background-image'，function（i）{
返回“url（'”+工件[i%artifacts.length]+”）”；
})

一,
二,
三,
四,
五,
六,
七,
八,
九,
十,

使用内部迭代的回调方法。其中第一个参数是index，并基于该值从数组中获取css属性值

var工件=[
'http://placehold.it/50x150',
'http://placehold.it/100x125',
'http://placehold.it/150x100',
'http://placehold.it/200x50',
'http://placehold.it/150x75',
'http://placehold.it/100x100'
];
$（'ul.slick-dots li'）.css（'background-image'，function（i）{
返回“url（'”+工件[i%artifacts.length]+”）”；
})

一,
二,
三,
四,
五,
六,
七,
八,
九,
十,

请将相关代码添加到您的帖子中。循环浏览您的

li

元素列表。为图像阵列保留一个单独的计数器。当计数器到达数组末尾时，重置它…请将相关代码添加到您的帖子中。循环查看

li

元素列表。为图像阵列保留一个单独的计数器。当计数器到达数组末尾时，重置它…哇！这很有效率，做得很好。你能解释一下这是怎么回事吗？我对“%”感到困惑，谢谢@h0bb5:其中

i

表示元素索引。。。。。因此，

i%artifacts.length将用于计算索引。。。。。它计算余数（在范围或数组索引
0,1，…，arrayLength-1
中）。。。。。。如果索引达到
arrayLength
=>
i%工件。长度
results
0
，
arrayLength+1
=>
i%工件。长度
results
1
。。。。等等哇！这很有效率，做得很好。你能解释一下这是怎么回事吗？我对“%”感到困惑，谢谢@h0bb5:其中
i
表示元素索引。。。。。因此，
i%artifacts.length将用于计算索引。。。。。它计算余数（在范围或数组索引
0,1，…，arrayLength-1
中）。。。。。。如果索引达到
arrayLength
=>
i%工件。长度
results
0
，
arrayLength+1
=>
i%工件。长度
results
1
。。。。等等