랜덤 이미지 보여주는 자바스크립트 - To display random images

구글 블로그에 랜덤으로 이미지를 보여주는 자바스크립트 코드를 넣어보자.

아래 코드는 페이지가 refresh 될 때마다 두개 이미지 중에서 하나가 랜덤으로 표시된다.

물론 링크와 설명 부분도 같이 바뀐다.

랜덤으로 보여줄 이미지 숫자를 늘리려면 아래 코드에서 원하는 이미지 수만큼 배열을 늘려주면 된다. 

단 배열의 갯수와 배열번호를 맞추어 주어야 한다.

스크립트를 수정한 후 html 파일의 원하는 위치에 넣어주면 된다.

<script type='text/javascript'>

//이미지 배열

var images = new Array(2);

images[0] = "이미지 주소1";

images[1] = "이미지 주소2";

//링크 배열

var url = new Array(2);

url[0] = "링크 주소1";

url[1] = "링크 주소2";

//이미지 설명 배열

var caption = new Array(2);

caption[0] = "설명 문자열1";

caption[1] = "설명 문자열2";

var index = Math.floor(Math.random() * images.length);

document.write("<a href='" + url[index] + "' target='_blank'><img src='"

+ images[index] + "'/></a><p><span>"

+ caption[index] + "</span></p>");

</script>

초보자가 드리는 팁!

위 코드는 

1. 값을 넣기 위한 배열 변수를 정의하고

2. 각 배열에 값을 넣고

3. 랜덤 함수로 하나의 배열 위치값을 선택하고

4. 그에 해당하는 배열의 값을 가져와 html 태그를 작성해서 출력한다.

복사하기

<script type='text/javascript'>
    var images = new Array(2);
    images[0] = "";
    images[1] = "";

    var url = new Array(2);
    url[0] = "";
    url[1] = ""; 

    var caption = new Array(2);
    caption[0] = "";
    caption[1] = "";
    
    var index = Math.floor(Math.random() * images.length);
    document.write("<a href='" + url[index] + "' target='_blank'><img src='" 
                               + images[index] + "'/></a><p><span>" 
                               + caption[index] + "</span></p>");
</script>