我有一系列有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来解决这个问题。
答案 0 :(得分:7)
使用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>