[JavaScript] 방문할때마다 랜덤으로 변하는 이미지 구현하기

이번 포스팅에서는 자바스크립트를 활용해 방문할때마다 변하는 이미지를 구현해보겠습니다. 작동원리는 자바스크립트 배열에 각각 이미지를 저장해놓고 랜덤함수를 호출해 랜덤으로 배열에 저장되어있는 이미지를 호출하는 방식입니다.


방문할때마다 변하는 이미지 구현하기 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>방문할때마다 변하는 이미지</title>
<script language = "javascript">
	var imgArray = new Array();
	imgArray[0] = "C:/Users/user/Desktop/개발도구/웹개발사진/MakeUp/jung.gif";
	imgArray[1] = "C:/Users/user/Desktop/개발도구/웹개발사진/MakeUp/Login.png";
	imgArray[2] = "C:/Users/user/Desktop/개발도구/웹개발사진/MakeUp/사이트전체사진/header-bg.png"
	imgArray[3] = "C:/Users/user/Desktop/개발도구/웹개발사진/MakeUp/사이트전체사진/마지막립스틱.jpg";
	
	function showImage(){
		var imgNum = Math.round(Math.random()*3);
		var objImg = document.getElementById("introImg");
		objImg.src = imgArray[imgNum];
	}
</script>
</head>
<body onload = "showImage()">
	<img id = "introImg" border="0">
</body>
</html>

이미지 경로에는 자신의 띄워줄 이미지의 경로를 써주시면 됩니다.


[JavaScript] 자바스크립트란 무엇인가?

[JavaScript] 자바스크립트 배열 선언 및 사용법 총정리

[JavaScript] 라디오버튼 클릭시 원하는 배경색으로 바꾸기

[JavaScript] 회원가입 폼 유효성검사 (정규식)


댓글(2)

  • TaeYong
    2018.07.09 07:27

    웹고수가 다됬네.
    잘보고 갑니다 형 ㅎㅎ

  • DS
    2020.05.18 11:41

    이걸 혹시 모바일 배경화면 인트로로 사용할려면
    배경딱맞게 할려면 어떻게 가능할까요?

Designed by JB FACTORY