如何遍历列表并添加图像

Question

我有一系列有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:http://codepen.io/H0BB5/pen/MJYgdz

Answer 1

使用css()带内部迭代的回调方法.其中第一个参数是索引并基于从数组中获取值以生成css属性值.

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.slick-dots li').css('background-image', function(i) {
  return "url('" + artifacts[i % artifacts.length] + "')";
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>