javascript - jQuery - 在图像之间随机播放

Question

我正在尝试在模板中的 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 张图像的地方，当随机选择新图像时，它会转到列表的末尾，而第一个图像会消失。

我希望我已经解释清楚了我的意思

Answer 1

我想出了这个: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();