728x90
반응형
<getElement 사용하여 사진 바꾸기>
아래와 같이 왼쪽 화살표를 클릭하면 마지막 사진부터 순차적으로 바꿔지고
오른쪽 화살표를 클릭하면 다음 사진으로 바꿔지도록 한다. 단, gelElement를 사용한다.
<body>
<body>
<div>
<a href="#" id="lt">◀</a>
<img alt="img01.jpg" src="resources/image/img01.jpg"/>
<a href="#" id="gt">▶</a>
</div>
</body>
<script>
<script type="text/javascript">
window.onload = function(){
var anchs = document.querySelectorAll("a");
var img = document.getElementsByTagName("img")[0];
var count = 1;
//방법 1
//왼쪽 화살표 클릭
anchs[0].onclick=function(){
var alt = document.getAttribute("alt");
if(alt == "img01.jpg"){
count=5;
img.setAttribute("alt", "img05.jpg");
img.setAttribute("src", "image/img05.jpg");
} else {
count--;
img.setAtrribute("alt", "img0" + count + ".jpg");
img.setAttribute("src", "image/img0" + count + ".jpg");
}
}
//오른쪽 화살표 클릭
anchs[1].onclick=function(){
var alt = document.getAtrribute("alt");
if(alt == "img05.jpg"){
count = 1;
img.setAttribute("alt", "img01.jpg");
img.setAttribute("src", "image/img01.jpg");
} else {
count++;
img.setAttribute("alt", "img0" + count + ".jpg");
img.setAttribute("src", "image/img0" + count + ".jpg");
}
//방법 2
anchs[0].onclick=function(){
count--;
if(count < 1){
count = 5;
} else {
count--;
img.setAttribute("src", "image/img0" + count + ".jpg");
}
}
anchs[1].onclick=function(){
count++;
if(count>5){
count = 1;
} else {
img.setAttribute("src", "image/img0" + count + ".jpg");
}
}
}
</script>728x90
반응형
'Web > JavaScript' 카테고리의 다른 글
| [JS]DOM_row추가삭제 (0) | 2020.07.30 |
|---|---|
| [JS]DOM_태그추가삭제 (0) | 2020.07.30 |
| [JS]DOM_img생성(연습) (0) | 2020.07.30 |
| [JS]DOM_element생성 (0) | 2020.07.30 |
| [JS]String (0) | 2020.07.28 |
