jQuery - 图像之间的随机播放

Question

我试图在我的模板中创建 5张图片之间的shuffle。目前我所拥有的是shuffle 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();