我正在使用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>