使用 jquery 随机更改多个元素的背景图像

Randomly change background image for multiple elements using jquery

我正在尝试使用 jquery 更改多个元素的背景图像。 这些元素应该以随机选择的背景图像开始,然后每 2 秒随机播放一次随机选择的背景图像。

我使用在搜索解决方案时发现的其他代码片段将这个 vanilla javascript 组合在一起,但我 运行 遇到以下问题:

  1. 我的代码只更改了第一个元素的背景图像。
  2. 我的代码从随机选择的背景图像开始,但随后它只是按顺序遍历图像列表,而不是每次更改时随机选择一个新图像。
  3. 背景图像更改后,background-size 值以某种方式不再应用。

这是我的代码:

var urls = [
'url(http://placekitten.com/g/150/150)', 
'url(http://placekitten.com/g/200/200)', 
'url(http://placekitten.com/g/250/250)',
'url(http://placekitten.com/g/300/300)',
'url(http://placekitten.com/g/350/350)',
'url(http://placekitten.com/g/400/400)',
'url(http://placekitten.com/g/450/450)'
];
var active = Math.floor(Math.random() * (urls.length));
setInterval(function(){
    document.querySelector('.logo').style.background = urls[active];
    active++;
    if (active == urls.length) active = 0;
}, 2000);
.logo {
  background: url(http://placekitten.com/g/150/150);
  background-size: cover;
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 1px solid red;
  transition: background .5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="logo"></div>
<div class="logo"></div>
<div class="logo"></div>
<div class="logo"></div>
<div class="logo"></div>
<div class="logo"></div>

这里是 jsfiddle

中的相同代码

请帮助我获得解决我的问题的 jQuery 版本。

您可以 select 所有带有 class logo 的项目并使用 forEach() 像这样迭代它们:

var urls = [
'url(http://placekitten.com/g/150/150)', 
'url(http://placekitten.com/g/200/200)', 
'url(http://placekitten.com/g/250/250)',
'url(http://placekitten.com/g/300/300)',
'url(http://placekitten.com/g/350/350)',
'url(http://placekitten.com/g/400/400)',
'url(http://placekitten.com/g/450/450)'
];
var active = Math.floor(Math.random() * (urls.length));
setInterval(function(){
    let logos = document.querySelectorAll('.logo');
    logos.forEach(function(item) {
       item.style.background = urls[active];
       active++;
       if (active == urls.length) active = 0;
    })
}, 2000);
.logo {
  background: url(http://placekitten.com/g/150/150);
  background-size: cover;
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 1px solid red;
  transition: background .5s;
}
<div class="logo"></div>
<div class="logo"></div>
<div class="logo"></div>
<div class="logo"></div>

更新:如对此答案的评论中所述,附加要求是 select 随机选择带有 class 徽标的 4 个元素之一,并更改此元素的背景图像和随机遍历所有 4 个元素。这可以按如下方式完成:

var urls = [
  'url(http://placekitten.com/g/150/150)',
  'url(http://placekitten.com/g/200/200)',
  'url(http://placekitten.com/g/250/250)',
  'url(http://placekitten.com/g/300/300)',
  'url(http://placekitten.com/g/350/350)',
  'url(http://placekitten.com/g/400/400)',
  'url(http://placekitten.com/g/450/450)'
];
var active = Math.floor(Math.random() * (urls.length));
setInterval(function() {
  let rand = Math.floor(Math.random() * 4);
  document.getElementsByClassName('logo')[rand].style.background = urls[active];
  active++;
  if (active == urls.length) active = 0;
  //})
}, 2000);
.logo {
  background: url(http://placekitten.com/g/150/150);
  background-size: cover;
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 1px solid red;
  transition: background .5s;
}
<div class="logo"></div>
<div class="logo"></div>
<div class="logo"></div>
<div class="logo"></div>

更新:如评论中所述,应防止同一图像连续两次随机更新。现在,这是通过将最后更新的图像存储在数据属性中并更改随机数(以防它与该数据属性相同)来处理的。此外,background-size: cover 存在问题。这是通过将 background 更改为 background-image.

解决的

var urls = [
  'url(http://placekitten.com/g/150/150)',
  'url(http://placekitten.com/g/200/200)',
  'url(http://placekitten.com/g/250/250)',
  'url(http://placekitten.com/g/300/300)',
  'url(http://placekitten.com/g/350/350)',
  'url(http://placekitten.com/g/400/400)',
  'url(http://placekitten.com/g/450/450)'
];
var active = Math.floor(Math.random() * (urls.length));
setInterval(function() {
  let rand = Math.floor(Math.random() * 4);
  if (rand <= 2 && rand == document.getElementsByClassName('logo')[0].getAttribute("data-changed")) {
    rand = rand + 1;
  } else if (rand == 2 && rand == document.getElementsByClassName('logo')[0].getAttribute("data-changed")) {
    rand = rand - 1;
  }

  document.getElementsByClassName('logo')[rand].style.backgroundImage = urls[active];
  document.getElementsByClassName('logo')[0].setAttribute("data-changed", rand);

  active++;
  if (active == urls.length) active = 0;
  //})
}, 2000);
.logo {
  background-image: url(http://placekitten.com/g/150/150);
  background-size: cover;
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 1px solid red;
  transition: background .5s;
}
<div class="logo"></div>
<div class="logo"></div>
<div class="logo"></div>
<div class="logo"></div>