[JavaScript] 방문할때마다 랜덤으로 변하는 이미지 구현하기
- Web/JavaScript
- 2018. 7. 9.
이번 포스팅에서는 자바스크립트를 활용해 접속할때마다 변하는 이미지를 구현해보겠습니다. 작동원리는 자바스크립트 배열에 각각 이미지를 저장해놓고 랜덤함수를 호출해 랜덤으로 배열에 저장되어있는 이미지를 호출하는 방식입니다.
방문할때마다 변하는 이미지 구현하기 예제
<!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] 자바스크립트 배열 선언 및 사용법 총정리
'Web > JavaScript' 카테고리의 다른 글
| [JavaScript] 콘솔(console) 로그 찍는 방법 (+console 주요 메서드 사용법) (0) | 2024.02.07 |
|---|---|
| [JavaScript] HTML에서 자바스크립트(.js) 파일 사용하기 (3) | 2024.02.05 |
| [JavaScript] 동적으로 테이블 만들기 (0) | 2018.07.08 |
| [JavaScript] 라디오버튼 클릭시 원하는 배경색으로 바꾸기 (0) | 2018.07.07 |