아이디어
1) 뼈대를 HTML로 작성
2) 화살표를 누르면 이미지 바뀌도록 JS 작성
2-1) button.addEventListner("click", function ButtonClick(){}) 를 사용해서 화살표를 누르면 다음 이미지로 넘어가도록 작성, 배열에 이미지를 넣어서 배열에 담긴 이미지를 순차적으로 보이도록 해보자.
2-2) 좌우 화살표와 아래 라디오버튼 동기화. -> 3-1)에서 선언한 $input 변수를 이용해서 $input[].checked = "checked";로 라디오버튼을 체크하였다.
3) 아래 버튼에 해당하는 상호작용 JS작성
3-1)버튼을 누를 때마다 배열의 인덱스를 재설정, JS의 number를 index로 지정.
정리할 것
Array() 생성자->배열 리터럴과 비교해서 정리 & 생성자함수와 new키워드 정리 & this키워드 정리 & window객체
잘 안된 부분
div태그 내에 있는 좌 우 화살표를 각각 어떻게 다른 화살표로 인식해서 동작하게 할 지 고민함 -> 클래스명을 각각 따로 줘서 해결, ev.target.textContent === ___ 는 왜 안된걸까..?
배열에 담은 이미지파일명을 이미지태그에 어떻게 옮길까 고민함 -> 이미지태그를 변수로 가져와서 .src로 옮겨줌.
처음과 마지막 사진에서 어떻게 마지막과 처음사진으로 이동할 지 고민함 -> 중첩 if문을 써서 배열 인덱스를 처음 사진일 시 -1 인덱스가 들어오면 마지막 사진으로 가도록, 마지막은 그와 반대로 작성함.
addEventListner is not a function 오류 해결 -> getElementsByTagName()으로 가져오는 요소는 배열이므로 몇번째 요소인지를 명시해야한다.
정렬파트 잘 안됨. 화살표와 사진들을 div안에 넣고 그 내부를 span으로 각각 써서 정렬하였다. 정렬파트 정리!
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color: rgb(0, 119, 255);">
<div class="box">
<span><button class="mainbutton_left"><</button></span>
<span><img src="./images/image-1.png" width="1000px;" height="300px;"></span>
<span><button class="mainbutton_right">></button></span>
</div>
<div class="subbutton">
<span>
<input type="radio" name="button" value="image1" checked="checked">
<input type="radio" name="button" value="image2">
<input type="radio" name="button" value="image3">
<input type="radio" name="button" value="image4">
<input type="radio" name="button" value="image5">
</span>
</div>
<script type="text/javascript" src="Carousel.js"></script>
</body>
</html>
var images = new Array();
for(let i=0; i<5; i++){
images[i] = `image-${i+1}.png`;
};
var number = 0;
const $div = document.getElementsByTagName("div");
const $getimage = document.getElementsByTagName("img");
const $input = document.getElementsByTagName("input");
$div[0].addEventListener("click", function onClick(ev){
if(ev.target.tagName === "IMG"){
return;
}
else if(ev.target.className === "mainbutton_left"){
number -= 1;
if(number === -1){
number = 4;
$getimage[0].src = `./images/${images[number]}`;
$input[number].checked = "checked";
}else {$getimage[0].src = `./images/${images[number]}`; $input[number].checked = "checked";};
}
if(ev.target.className === "mainbutton_right"){
number += 1;
if(number === 5){
number = 0;
$getimage[0].src = `./images/${images[number]}`;
$input[number].checked="checked";
}else {$getimage[0].src = `./images/${images[number]}`; $input[number].checked = "checked";};
}
});
$input[0].addEventListener("click", function Click(ev){
number = 0;
$getimage[0].src = `./images/${images[number]}`;
});
$input[1].addEventListener("click", function Click(ev){
number = 1;
$getimage[0].src = `./images/${images[number]}`;
});
$input[2].addEventListener("click", function Click(ev){
number = 2;
$getimage[0].src = `./images/${images[number]}`;
});
$input[3].addEventListener("click", function Click(ev){
number = 3;
$getimage[0].src = `./images/${images[number]}`;
});
$input[4].addEventListener("click", function Click(ev){
number = 4;
$getimage[0].src = `./images/${images[number]}`;
});
//이 부분 반복문으로 짧게 할 수 있을 것 같은데.. 생각해보자
.box{
text-align: center;
}
.subbutton{
text-align: center;
}
button{
width: 30px;
height: 30px;
border-radius: 50%;
border: 0px;
background-color: whitesmoke;
opacity: 0.2;
position: relative;
top: -150px;
}
button:hover{
opacity: 1;
}
'바닐라코딩 사전학습 > 코드연습, 퀴즈, 과제' 카테고리의 다른 글
| Primitive / Reference 퀴즈 (0) | 2021.12.27 |
|---|---|
| Scope Quiz (0) | 2021.12.27 |
| Background Changer (0) | 2021.12.24 |
| 김서방 찾기 / 가운데글자 가져오기 / 수박수박수박수 (0) | 2021.12.24 |
| Exercise - FizzBuzz/Biggest Number/Word position (0) | 2021.12.24 |