// 1. 반복문을 이용하여 big_image에 li를 생성
// 2. 이미지를 담는 객체를 생성하여 담기
// 3. 큰 영역에 첫번째 이미지를 담기
// ==============================================
// 1. 작은 이미지를 마우스 올릴경우 다음과 같은 기능을 수행
// 2. 작은 이미지에 들어있는 이미지와 같은형태의 큰이미지의 주소를 찾아
// bigUrl + galleryData[i].bigImg
// 3. 큰 영역에 배경이미지로 배치
// 4. 이때 작은이미지가 어떤 것이 선택되었는지 주목성이 있도록 처리
// 5. 주목성처리 : class="act" 삽입
// // 추가기능1 : 작은이미지를 선택할때, 다른영역에 있는 형태는 act해제
// // 추가기능2 : 마우스가 아닌 키보드 focus 처리
// // 추가기능3 : 클릭시 처리되는 부분도 일부 해결
// ==============================================
// 이외에 첨부하면 좋을 기능
// big_image 영역에 이미지가 바뀌면 깜빡이는 현상을 조정
// 1. bigImage영역 내부에 2개의 영역 생성 앞/뒤로 배치
// 2. 앞에 있는 것은 현재 보이는 것, 뒤에 존재하는 건 기본 display:none;
// 3. 작은 이미지에 마우스 처리하면, bigImage뒤에 내용을 삽입하고, 동시에 display:block
// 4. 앞에있는 요소를 사라지게 (방법은 자유)
// 5. 뒤에 존재하는 요소를 앞으로 오게 처리(z-index를 이용, 앞의 요소를 뜯어서 뒤로 이동)
// 6. 뒤로 이동한 요소는 내부를 비우기
'coding > jQuery' 카테고리의 다른 글
jQuery - banner와 indicator를 이용해 만들기 (0) | 2021.07.21 |
---|---|
jQuery - banner 요소 추가 (0) | 2021.07.21 |
jQuery - 06 mouseclick_xy (0) | 2021.07.21 |
0629 / jQuery - delete (삭제코드) (0) | 2021.06.30 |
0622 / jQuery - tab menu (0) | 2021.06.23 |