표시 할 임의의 이미지 선택

Question

4 개의 이미지가 포함 된 페이지가 있습니다. 페이지를 볼 때마다 이미지를 선택하여 임의로 이미지를 선택하고 싶습니다.

이미지는 표시되는 이미지에 따라 특정 페이지에 연결해야합니다. 예를 들어 :

• image_01 < - 링크 -> page_620.html
• image_04 < - 링크 -> page_154.html

HTML :

<div class="thankyou_wrapper"> 
    <div class="thankyou"> 
    <div class="socialphoto_container"> 
     <div class="socialphoto"><a href="page_082.html" target="_self"><img src="images/image_01.jpg" width="220" height="220" /></a></div> 
     <div class="socialphoto"><a href="page_128.html" target="_self"><img src="images/image_05.jpg" width="220" height="220" /></a></div> 
     <div class="socialphoto"><a href="page_852.html" target="_self"><img src="images/image_08.jpg" width="220" height="220" /></a></div> 
     <div class="socialphoto"><a href="page_685.html" target="_self"><img src="images/image_04.jpg" width="220" height="220" /></a></div> 
    </div> 
    </div> 
</div> 

CSS :

.thankyou_wrapper { 
    width: 100%; 
    background-color: #FFF; 
} 
.thankyou { 
    margin: auto; 
    width: 940px; 
    min-height: 216px; 
    overflow: hidden; 
    padding-top: 20px; 
    padding-bottom: 20px; 
} 
.socialphoto_container { 
    width: 940px; 
    height: 230px; 
} 
.socialphoto { 
    width: 240px; 
    height: 220px; 
    margin-right: 0px; 
    float: left; 
} 
.socialphoto:last-child { 
    width: 220px; 
} 

아이디어가 있으십니까?

Answer 1

또, 다음 제 4 개 이미지를 잡아 사업부에 추가, 가능한 이미지의 어레이를 생성하는 배열을 셔플 링에 의해 수행 할 수

// randomize array function 
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; 
} 

// declare image data as array of objects 
var images = [ 
    { src : 'images/image_01.jpg', href : 'page_082.html' }, 
    { src : 'images/image_02.jpg', href : 'page_083.html' }, 
    { src : 'images/image_03.jpg', href : 'page_084.html' }, 
    { src : 'images/image_04.jpg', href : 'page_085.html' }, 
    { src : 'images/image_05.jpg', href : 'page_086.html' }, 
    { src : 'images/image_06.jpg', href : 'page_087.html' } 
]; 

$(document).ready(function(){ 

    var img, anchor, div; 
    var cont = $('.socialphoto_container'); 
    cont.children().remove(); 

    images.shuffle(); 

    for(var i=0; i<4; i++){ 
     img = $('<img />', { src : images[i].src }); 
     anchor = $('<a></a>', { href : images[i].href, target : '_self' }); 
     div = $('<div></div>', { class : 'socialphoto' }); 
     anchor.append(img); 
     div.append(anchor); 
     cont.append(div); 
    } 
}); 

Array.shuffle()로부터 취해진 피셔 예이츠 알고리즘이며 here.