이미지 넘기기
이미지 태그를 만들고
fuction을 이용해 태그를 누르면 이미지가 넘어가도록 작동하는
로직을 만들어보겠습니다.
var num = 0; // 그림 번호
console.log(document.getElementById("pic"));
function nextPic() {
num ++;
if (num >= 3) {
num = 0;
}
// 마지막 번호까지 돌면 다시 0으로 돌아오는 장치입니다.
document.getElementById("pic").src
= "img/img" + num + ".jpg"; // 그림 번호 바꾸기
return false; // 그림 변경만 하고 a태그 클릭으로 인한 주소 이동은 막기.
}
num ++ 를 이용해서 폴더 내부에 있는 img0, img1, img2 파일들을
차례로 화면에 출력시켜보려고 합니다.
"img/img" + num + ".jpg";로
이미지의 주소에 num 변수를 포함시켰습니다.
function precPic() {
num --;
if(num <= -1) {
num = 0;
}
document.getElementById("pic").src
= "img/img" + num + ".jpg";
return false;
}뒤로가기 기능도 추가했습니다.
그럼 body에서 이러한 기능들을 적용시켜보겠습니다.
<body>
<h1>이미지 넘기기</h1>
<img width="200px" src="img/img0.jpg" id="pic">
<a href="#" onclick="return nextPic()">>></a>
<a href="#" onclick="return precPic()"><<</a>
<script>
// console.log(document.getElementById("pic").src);
// id = "pic"인 태그 내부의 src속성값을 가져옴.
</script>
</body>
<<
로 넘기기와 뒤로가기 단추를 설정했습니다.
참고로 여기서 return태그를 이용해 a href에 false를
돌려주지 않는다면
function이 실행될 때 주소창에 #이 추가되게 됩니다.
불필요한 주소 이동을 막는다는 건 그러한 뜻이었습니다.
일단은 여기까지 입니다.
배울 게 참 많네요.