단비의 코딩 공부 blog

[Vanilla JS]study 18일차 - 웹 컨텐츠 제작 - 갤러리 본문

javascript&jquery

[Vanilla JS]study 18일차 - 웹 컨텐츠 제작 - 갤러리

황굽달 2023. 3. 28. 09:24

1. 페이드 효과

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>이미지갤러리</title>
        <link rel="stylesheet" href="gallery01.css">
    </head>
    <body>
        <!-- 갤러리 전체 묶음 -->
        <div id="gallery">
            <!-- 사진구역 -->
            <div id="photo">
                <ul>
                    <li><img src="https://cdn.pixabay.com/photo/2014/04/13/20/49/cat-323262_960_720.jpg" alt=""></li>
                    <li><img src="https://cdn.pixabay.com/photo/2019/11/08/11/56/cat-4611189_960_720.jpg" alt=""></li>
                    <li><img src="https://cdn.pixabay.com/photo/2018/07/13/10/20/cat-3535404_960_720.jpg" alt=""></li>
                    <li><img src="https://cdn.pixabay.com/photo/2019/05/08/21/21/cat-4189697_960_720.jpg" alt=""></li>
                    <li><img src="https://cdn.pixabay.com/photo/2017/03/14/14/49/cat-2143332_960_720.jpg" alt=""></li>
                </ul>
            </div>
            <div id="pagination">
                <!--li개수에 맞게 버튼 동적생성-->
            </div>
        </div>
        <script src="gallery01.js"></script>
    </body>
</html>
*{ padding: 0; margin: 0; }
li{ list-style: none; }

/* 갤러리 전체 */
#gallery{
    margin: 50px;
    width: 500px; height: 280px;
    border: 3px solid black;
    position: relative; /* 원버튼 앱솔루트 기준을 현재 요소로 변경 */
}
/* 갤러리 사진 파트 */
#gallery #photo{
    width: 100%; height: 100%; 
    position: relative; /* li의 앱솔루트 기준을 현재 요소로 변경 */
}
#gallery #photo ul{
    width: 100%; height: 100%;
}
/* 모든 li(사진)를 겹쳐보이게 처리 */
#gallery #photo li{
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;

    opacity: 0; /* 안보이게 처리 */
    transition: 0.3s ease-in-out;
}
/* 사진 활성화 */
#gallery #photo li.active{ opacity: 1; }
#gallery #photo img{
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
/* 갤러리 버튼 파트 - JS에서 버튼은 사진개수에 맞게 동적생성 */
#gallery #pagination{
    position: absolute; bottom: 20px; 
    width: 100%; height: 15px;
    text-align: center;
}
#gallery #pagination button{ /* 동적생성되는 버튼 */
    width: 15px; height: 15px; margin: 0 5px;
    border: none; background-color: orange;
    border-radius: 10px;
    cursor: pointer; /* 마우스 손모양 처리 */
}
#gallery #pagination button.active{ /* 활성화 상태 */
    background-color: aquamarine;
}
//1. 문서객체 선택
const list = document.querySelectorAll('#gallery #photo li');
const pagination = document.getElementById('pagination');

//2. button태그를 문자열로 담을 변수 선언
let btnTag = '';

//3. li태그 개수만큼 반복해서 담기
for(let i=0;i<list.length;i++){
    btnTag += '<button>' + (i + 1) + '</button>';
}

//4. pagination - 문자열로 처리
pagination.innerHTML = btnTag;

// const btn = document.querySelectorAll('#pagination button');
const btn = pagination.getElementsByTagName('button');

//5. 초기실행 - 첫번째 버튼/사진 활성처리
btn[0].classList.add('active');
list[0].classList.add('active');

//6. 클릭이벤트
for(let i=0;i<btn.length;i++){
    btn[i].addEventListener('click', function(){
        //모든 버튼 활성제거, 모든 li태그 비활성 처리
        for(let j=0;j<btn.length;j++){
            btn[j].classList.remove('active');
            list[j].classList.remove('active');
        }
        
        //클릭한 버튼만 활성
        this.classList.add('active');
        list[i].classList.add('active');
    });
}

 

2. 슬라이드 효과

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>이미지갤러리</title>
        <link rel="stylesheet" href="gallery02.css">
    </head>
    <body>
        <div id="gallery">
            <div id="photo">
                <ul>
                    <li><img src="https://cdn.pixabay.com/photo/2014/04/13/20/49/cat-323262_960_720.jpg" alt=""></li>
                    <li><img src="https://cdn.pixabay.com/photo/2019/11/08/11/56/cat-4611189_960_720.jpg" alt=""></li>
                    <li><img src="https://cdn.pixabay.com/photo/2018/07/13/10/20/cat-3535404_960_720.jpg" alt=""></li>
                    <li><img src="https://cdn.pixabay.com/photo/2019/05/08/21/21/cat-4189697_960_720.jpg" alt=""></li>
                    <li><img src="https://cdn.pixabay.com/photo/2017/03/14/14/49/cat-2143332_960_720.jpg" alt=""></li>
                </ul>
            </div>
            <div id="pagination">
                <!--li개수에 맞게 버튼 동적생성-->
            </div>
        </div>
        <script src="gallery02.js"></script>
    </body>
</html>
*{ padding: 0; margin: 0; }
li{ list-style: none; }
/* 갤러리 전체 */
#gallery{
    margin: 50px;
    width: 500px; height: 280px;
    border: 3px solid black;
    position: relative; /* 원버튼 앱솔루트 기준을 현재 요소로 변경 */
    overflow: hidden; /*부모영역보다 넘어간 자손을 안보이게 처리 */
}
/* 갤러리 사진 파트 */
#gallery #photo{
    width: 100%; height: 100%; 
    position: relative; /* li의 앱솔루트 기준을 현재 요소로 변경 */
}
#gallery #photo ul{
    position: absolute; /* 움직일 객체 */
    top: 0; left: 0; /* 처음 사진이 보일 위치값 */
    
    /* 자손들이 수평나열 되려면 자손폭 * 자손개수 = 부모폭 */
    /* width: 2500px; */
    height: 100%;
    transition: left 0.3s ease-in-out; /* 변화에 시간차 처리 */
}
/* 리스트 나열처리 */
#gallery #photo li{
    float: left; /* 부모영역이 부족하면 수평나열처리가 안됨 */
    width: 500px; height: 280px;
}
#gallery #photo img{
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
/* 갤러리 버튼 파트 - JS에서 버튼은 사진개수에 맞게 동적생성 */
#gallery #pagination{
    position: absolute; bottom: 20px; 
    width: 100%; height: 15px;
    text-align: center;
}
#gallery #pagination button{
    width: 15px; height: 15px; margin: 0 5px;
    border: none; background-color: orange;
    border-radius: 10px;
    cursor: pointer; /* 마우스 손모양 처리 */
}
#gallery #pagination button.active{ /* 활성화 상태 */
    background-color: aquamarine;
}
//1. 문서객체 선택
const list = document.querySelectorAll('#gallery #photo li');
const pagination = document.getElementById('pagination');

//2. 버튼동적생성
let btnTag = '';

for(let i=0;i<list.length;i++){
    btnTag += '<button>' + (i + 1) + '</button>';
}
pagination.innerHTML = btnTag;

const btn = pagination.getElementsByTagName('button');

//3. ul태그의 폭을 설정 : li개수 * li한개의 폭
const ul = list[0].parentNode;
ul.style.width = (list.length * list[0].clientWidth) + 'px';

//4. 초기실행 - 첫번째 버튼만 활성화
btn[0].classList.add('active');

//5. 버튼클릭 이벤트
for(let i=0;i<btn.length;i++){
    btn[i].addEventListener('click', function(){
        //모든 버튼활성을 제거
        for(let j=0;j<btn.length;j++){
            btn[j].classList.remove('active');
        }
        this.classList.add('active');

        //첫번째 li가 보이는 건 - left가 0px 일때 = -li폭 * 0
        //두번째 li가 보이는 건 - left가 -li폭 일때 = -li폭 * 1
        //세번째 li가 보이는 건 - left가 -li*2폭 일때 = -li폭 * 2
        ul.style.left = -(list[0].clientWidth * i) + 'px';
    });
}
저작자표시

'javascript&jquery' 카테고리의 다른 글

[Vanilla JS]study 20일차 - 유튜브 iframe  (0) 2023.04.04
[Vanilla JS]study 19일차 - API 우편번호 검색  (0) 2023.03.29
[Vanilla JS]study 17일차 - 웹 컨텐츠 제작 - 탭바  (0) 2023.03.27
[Vanilla JS]study 16일차 - 웹 컨텐츠 제작 - 메인 메뉴  (0) 2023.03.24
[Vanilla JS]study 15일차 - 웹 컨텐츠 제작 - 검색 필터  (0) 2023.03.23
'javascript&jquery' Related Articles more