随机显示一组图像？

Question

我有一些图片：

每当有人刷新页面时，我想以随机顺序制作图像。

基本上，每次有人刷新时，图像都应该切换点。

我该怎么做？我已经搜索过，但似乎找不到多少。

我也希望图片链接到网站。

顺便说一句，我使用Smarty进行页面布局。

Answer 1

您可以使用以下内容：

<script type="text/javascript">


window.onload = function() {
  randomlinks();
};

function randomlinks(){
    var myrandom=Math.round(Math.random()*9)
    var links=new Array()
    links[0]="http://www.iamurl.xyz/1.jpg"
    links[1]="http://www.iamurl.xyz/2.jpg"
    links[2]="http://www.iamurl.xyz/3.jpg"
    links[3]="http://www.iamurl.xyz/44.jpg"
    links[4]="http://www.iamurl.xyz/43.jpg"
    links[5]="http://www.iamurl.xyz/12.jpg"
    links[6]="http://www.iamurl.xyz/11.jpg"
    links[7]="http://www.iamurl.xyz/11.jpg"
    links[8]="http://www.iamurl.xyz/133.jpg"
    links[9]="http://www.iamurl.xyz/112.jpg"
    links[10]="http://www.iamurl.xyz/111.jpg"


    window.location=links[myrandom]
}
</script>

Answer 2

您可以使用数组来执行此操作。但是，您必须对此数组使用shuffling方法。然后，您可以浏览新的随机数组以创建HTML字符串。你可以这样做：

＆＃13;

＆＃13;

//https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
Array.prototype.shuffle=function(){var i=this.length,j,temp;if(i==0)return this;while(--i){j=Math.floor(Math.random()*(i+1));temp=this[i];this[i]=this[j];this[j]=temp}return this}

var images = [
    {url: "1.gif", link: "http://www.google.com"},
    {url: "2.gif", link: "http://www.youtube.com"},
    {url: "3.gif", link: "http://www.facebook.com"}
];
var imagesShuffle = images.shuffle();

var elementParent = document.querySelector("#images");

imagesShuffle.forEach(function(image){
    elementParent.innerHTML += '<div class="imageItem"><a href="'+image.link+'"><img src="'+image.url+'" alt="'+image.url+'"></a></div>'
})

＆＃13;

#images{background:#BC4F0A; width:200px}

#images .imageItem {border-bottom:1px solid black}

#images .imageItem a {display:block;padding:15px 10px; }

＆＃13;

<div id="images"></div>

＆＃13;

＆＃13;

＆＃13;