<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#photo{
position: absolute;
left: 500px;
top: 150px;
width: 400px;
height: 500px;
border: 5px groove gold;
}
#btnRandom{
margin-left: 400px;
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript">
window.onload=function(){
//배열에 10개의 이미지를 넣는다
var imgarr=new Array();
imgarr.push("../image/1.jpg");
imgarr.push("../image/2.jpg");
imgarr.push("../image/3.jpg");
imgarr.push("../image/4.jpg");
imgarr.push("../image/5.jpg");
imgarr.push("../image/6.jpg");
imgarr.push("../image/7.jpg");
imgarr.push("../image/8.jpg");
imgarr.push("../image/9.jpg");
imgarr.push("../image/10.png");
//photo 요소값 얻기
var photo=document.getElementById("photo");
//0~9까지의 난수값 얻기..참조변수 처리
var idx=parseInt(Math.random()*10);
//photo의 src속성변경(배열의 난수값 적용)..초기이미지
photo.setAttribute("src", imgarr[idx]);
//이미지 버튼 이벤트
document.getElementById("btnRandom").onclick=function(){
//0~9까지의 난수값 얻기..참조변수 처리
var idx=parseInt(Math.random()*10);
//photo의 src속성변경(배열의 난수값 적용)..초기이미지
photo.setAttribute("src", imgarr[idx]);
}
}
</script>
</head>
<body>
<input type="image" src="../image/09.png" id="btnRandom">
<marquee width="500" direction="left" behavior="slide">
<img alt="" src="../image/07.png" width="50">
<b>왼쪽 버튼을 누르면 이미지가 바뀝니다</b></marquee>
<img alt="" src="" id="photo"> <!-- 랜덤으로 바뀔 사진 -->
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 210928_time,setInterval,setTimeout,image (0) | 2021.09.28 |
|---|---|
| 210928_setInterval,setTimeout,clearInterval,keyCode (0) | 2021.09.28 |
| 210928_image,button,zoom-in/out (0) | 2021.09.28 |
| 210927_table,checkbox,radio (0) | 2021.09.28 |
| 210927_button,onchange (0) | 2021.09.27 |