使用 jquery 随机更改多个元素的背景图像
Randomly change background image for multiple elements using jquery
我正在尝试使用 jquery 更改多个元素的背景图像。
这些元素应该以随机选择的背景图像开始,然后每 2 秒随机播放一次随机选择的背景图像。
我使用在搜索解决方案时发现的其他代码片段将这个 vanilla javascript 组合在一起,但我 运行 遇到以下问题:
- 我的代码只更改了第一个元素的背景图像。
- 我的代码从随机选择的背景图像开始,但随后它只是按顺序遍历图像列表,而不是每次更改时随机选择一个新图像。
- 背景图像更改后,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>
我正在尝试使用 jquery 更改多个元素的背景图像。 这些元素应该以随机选择的背景图像开始,然后每 2 秒随机播放一次随机选择的背景图像。
我使用在搜索解决方案时发现的其他代码片段将这个 vanilla javascript 组合在一起,但我 运行 遇到以下问题:
- 我的代码只更改了第一个元素的背景图像。
- 我的代码从随机选择的背景图像开始,但随后它只是按顺序遍历图像列表,而不是每次更改时随机选择一个新图像。
- 背景图像更改后,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>