带有href的多个随机img

Question

我有多个带有链接的图片。我想随机显示其中的 5 个。 我在网上找到了一些脚本并对其进行了修改。这是一个可怕的代码，有时它并不总是显示 5 张图片。

html:

<div id="story">
    <a href="#1"><img src="https://dummyimage.com/170x170/000/fff&text=image+1" alt=""></a>
    <a href="#2"><img src="https://dummyimage.com/170x170/000/fff&text=image+2" alt=""></a>
    <a href="#3"><img src="https://dummyimage.com/170x170/000/fff&text=image+3" alt=""></a>
    <a href="#4"><img src="https://dummyimage.com/170x170/000/fff&text=image+4" alt=""></a>
    <a href="#5"><img src="https://dummyimage.com/170x170/000/fff&text=image+5" alt=""></a>
    <a href="#6"><img src="https://dummyimage.com/170x170/000/fff&text=image+6" alt=""></a>
    <a href="#7"><img src="https://dummyimage.com/170x170/000/fff&text=image+7" alt=""></a>
    <a href="#8"><img src="https://dummyimage.com/170x170/000/fff&text=image+8" alt=""></a>
    <a href="#9"><img src="https://dummyimage.com/170x170/000/fff&text=image+9" alt=""></a>
    <a href="#10"><img src="https://dummyimage.com/170x170/000/fff&text=image+10" alt=""></a>
    <a href="#11"><img src="https://dummyimage.com/170x170/000/fff&text=image+11" alt=""></a>
    <a href="#12"><img src="https://dummyimage.com/170x170/000/fff&text=image+12" alt=""></a>
    <a href="#13"><img src="https://dummyimage.com/170x170/000/fff&text=image+13" alt=""></a>
    <a href="#14"><img src="https://dummyimage.com/170x170/000/fff&text=image+14" alt=""></a>
    <a href="#15"><img src="https://dummyimage.com/170x170/000/fff&text=image+15" alt=""></a>
    <a href="#16"><img src="https://dummyimage.com/170x170/000/fff&text=image+16" alt=""></a>
    <a href="#17"><img src="https://dummyimage.com/170x170/000/fff&text=image+17" alt=""></a>
</div>

js

function randomize() {
    var allBanners = $('#story a');
    allBanners.hide();

    var index = Math.floor(Math.random() * allBanners.length);
    allBanners.eq(index).show();

    var index2 = Math.floor(Math.random() * allBanners.length - 1);
    allBanners.not(allBanners.eq(index)).eq(index2).show();

    var index3 = Math.floor(Math.random() * allBanners.length - 1);
    allBanners.not(allBanners.eq(index).eq(index2)).eq(index3).show();

    var index4 = Math.floor(Math.random() * allBanners.length - 1);
    allBanners.not(allBanners.eq(index).eq(index2).eq(index3)).eq(index4).show();

    var index5 = Math.floor(Math.random() * allBanners.length - 1);
    allBanners.not(allBanners.eq(index).eq(index2).eq(index3).eq(index4)).eq(index5).show();
}
randomize();

Answer 1

你可以使用这个小代码

randomElements = allBanners.get().sort(function() {
  return Math.round(Math.random()) - 0.5
}).slice(0, 5)

在你打电话给$(randomElements).show()之后

function randomize() {
  var allBanners = $('#banners a');
  allBanners.hide();

  randomElements = allBanners.get().sort(function() {
    return Math.round(Math.random()) - 0.5
  }).slice(0, 5)

  $(randomElements).show()
}
$('button').click(randomize);
randomize();

a img {
  width: 19%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banners">
  <a href="#1"><img src="https://dummyimage.com/170x170/000/fff&text=image+1" alt=""></a>
  <a href="#2"><img src="https://dummyimage.com/170x170/000/fff&text=image+2" alt=""></a>
  <a href="#3"><img src="https://dummyimage.com/170x170/000/fff&text=image+3" alt=""></a>
  <a href="#4"><img src="https://dummyimage.com/170x170/000/fff&text=image+4" alt=""></a>
  <a href="#5"><img src="https://dummyimage.com/170x170/000/fff&text=image+5" alt=""></a>
  <a href="#6"><img src="https://dummyimage.com/170x170/000/fff&text=image+6" alt=""></a>
  <a href="#7"><img src="https://dummyimage.com/170x170/000/fff&text=image+7" alt=""></a>
  <a href="#8"><img src="https://dummyimage.com/170x170/000/fff&text=image+8" alt=""></a>
  <a href="#9"><img src="https://dummyimage.com/170x170/000/fff&text=image+9" alt=""></a>
  <a href="#10"><img src="https://dummyimage.com/170x170/000/fff&text=image+10" alt=""></a>
  <a href="#11"><img src="https://dummyimage.com/170x170/000/fff&text=image+11" alt=""></a>
  <a href="#12"><img src="https://dummyimage.com/170x170/000/fff&text=image+12" alt=""></a>
  <a href="#13"><img src="https://dummyimage.com/170x170/000/fff&text=image+13" alt=""></a>
  <a href="#14"><img src="https://dummyimage.com/170x170/000/fff&text=image+14" alt=""></a>
  <a href="#15"><img src="https://dummyimage.com/170x170/000/fff&text=image+15" alt=""></a>
  <a href="#16"><img src="https://dummyimage.com/170x170/000/fff&text=image+16" alt=""></a>
  <a href="#17"><img src="https://dummyimage.com/170x170/000/fff&text=image+17" alt=""></a>
</div>