[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] 동적으로 테이블 만들기 (0) | 2018.07.08 |
|---|---|
| [JavaScript] 라디오버튼 클릭시 원하는 배경색으로 바꾸기 (0) | 2018.07.07 |
| [JavaScript] Alert(경고창), Prompt(입력창), Confirm(선택창) (2) | 2018.07.06 |
| [JavaScript] Span태그의 속성(글꼴,색상,크기,스타일) 변경하기 (0) | 2018.07.05 |