Отобразить набор изображений случайным образом?

Question

У меня есть несколько изображений:

Я хочу, чтобы изображения в случайном порядке каждый раз, когда кто-то обновляет страницу.

В принципе, изображения должны переключаться между точками каждый раз, когда кто-то освежает.

Как это сделать? Я искал, но не могу найти много.

Я также хочу, чтобы изображения ссылались на сайт.

BTW, я использую Smarty для моего макета страницы.

Answer 1

Вы можете использовать массивы, чтобы сделать это. Однако для этого массива необходимо использовать метод shuffling. Затем вы можете совершить поездку по новому рандомизированному массиву для создания строки HTML. Вы можете сделать это следующим образом:

//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>' 
 
})

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

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

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

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

Answer 2

Вы можете использовать что-то вроде этого:

<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>