有没有一种巧妙的方法可以随机显示图像?

时间:2020-03-03 15:45:46

标签: javascript html wordpress dom

我正在使用Sage主题在Wordpress中进行此操作。我想显示我提供的集合中的不同图像,仅显示一次,无需重复。我试图做一个简单的JS,但是没有用,当我尝试将其作为图像而不是gif格式时,它就可以工作。下面是我的代码,现在又是一件事,我正在某个地方托管图片,如果我可以改用资产/图片,那就太好了

var images = [
      'https://gifyu.com/image/IwmR',
      'https://gifyu.com/image/Iwmj',
      'https://gifyu.com/image/Iwm0',
      'https://gifyu.com/image/Iwm6',
      'https://gifyu.com/image/Iwmi',
      'https://gifyu.com/image/IwmC',
    ]

    function randImg() {
      var size = images.length
      var x = Math.floor(size * Math.random())
      document.getElementById('animateImage').src = images[x];
    }
    randImg()

HTMl part

    <div class="container">
      <div class="row">
        <div class="col-6">
          <div class="card my-5 mx-5" style="width: 25rem;">
            <img class="card-img-top" src= "" id="animateImage" alt=""></img>
            <div class="card-body">
              <h5 class="card-title text-center" id="title"></h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

            </div>
          </div>
        </div>
      </div>
    </div>

0 个答案:

没有答案