我正在尝试在模板中的 5 张图片 之间进行随机播放
。目前,我在5 张图片 之间随机播放
,然后随机显示其中一张。
我的 HTML
<div class="lightbulb" id="bulb1">
<img src="image-1.png" class="none" />
</div>
<div class="lightbulb" id="bulb2">
<img src="image-2.png" class="none" />
</div>
<div class="lightbulb" id="bulb3">
<img src="image-3.png" class="none" />
</div>
<div class="lightbulb" id="bulb4">
<img src="image-4.png" class="none" />
</div>
<div class="lightbulb" id="bulb5">
<img src="image-5.png" class="none" />
</div>
我的 CSS
.none {display:none;}
我的 JS
$(document).ready(function () {
get_random_bulb();
function get_random_bulb() {
var a = (parseInt(Math.random() * 4));
$(".lightbulb img.block").removeClass("block").addClass("none");
$(".lightbulb:eq(" + a + ") img").removeClass("none").addClass("block");
}
var rand = Math.round(Math.random() * (3500 - 500)) + 500;
setInterval(function () {
get_random_bulb();
}, rand);
});
这很好用,因为它随机选择一张图像并显示它,但我想要一个更有风格和更好的随机播放。如下图所示:
在显示最后 3 张图像的地方,当随机选择新图像时,它会转到列表的末尾,而第一个图像会消失。
我希望我已经解释清楚了我的意思
最佳答案
我想出了这个:https://jsfiddle.net/mehmetb/brbj8db6/
HTML
<div class="lightbulb" id="bulb1">
<img class="shuffle-image" />
</div>
<div class="lightbulb" id="bulb2">
<img class="shuffle-image" />
</div>
<div class="lightbulb" id="bulb3">
<img class="shuffle-image" />
</div>
CSS
.shuffle-image {
border-radius: 50%;
}
JavaScript
var shuffleList = [
'https://dummyimage.com/90x90/ccc/000000.jpg&text=1',
'https://dummyimage.com/90x90/ccc/000000.jpg&text=2',
'https://dummyimage.com/90x90/ccc/000000.jpg&text=3',
'https://dummyimage.com/90x90/ccc/000000.jpg&text=4',
'https://dummyimage.com/90x90/ccc/000000.jpg&text=5'
];
var $lightBulbs = $(".lightbulb");
function shuffle() {
var rand = Math.round(Math.random() * (3500 - 500)) + 500;
for(var i=0;i<$lightBulbs.length;++i) {
var $img = $lightBulbs.eq(i).children('img');
$img.attr('src', shuffleList[i]);
}
//Put the first array element to the last
shuffleList.push(shuffleList.shift());
//Each call will set a random delay between shuffles
setTimeout(function() {
shuffle();
}, rand);
}
shuffle();
关于javascript - jQuery - 在图像之间随机播放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40957844/