※홈페이지를 만들면서 자주 활용되는 기능 중 하나인 이미지 슬라이드 쇼를 만들어 보려 합니다.

이 기능과 사용한 여러 속성들을 이용한다면 디자인 적으로나 기능적으로 조금 더 다양한 방식의 구현이 가능할 것 같습니다. 

많이 사용해 보고 익숙해진다면 많이 활용할 수 있는 부분이라고 생각합니다. 

목차

1. 이미지 슬라이드

2. BODY/SCRIPT

3. CSS

 

1. 이미지 슬라이드

위의 화면처럼 양옆 버튼을 생성하고 버튼을 누르면 이미지가 하나씩 전환되는 슬라이드 쇼를 만들어 보려고 합니다.

그리고 일정시간마다 자동으로 이미지가 전환되는 기능도 추가로 구현해 보았습니다.

 

 

2. BODY/SCRIPT

<body>
    <div id="slideshow">
        <div id="slides">
            <img src="../img/p1.jpg" alt="">
            <img src="../img/p2.jpg" alt="">
            <img src="../img/p3.jpg" alt="">
            <button id="prev">&lang;</button>
            <button id="next">&rang;</button>
        </div>
    </div>

    <script>
        let prev_bttn = document.getElementById('prev');
        let next_bttn = document.getElementById('next');
        let imgs = document.querySelectorAll('#slides img');
        let img_num=0;
        showimg(img_num);

        prev_bttn.onclick = function () {
            img_num--;
            if(img_num < 0) {
                img_num = 2;
            }
            showimg(img_num);
        }
        next_bttn.onclick = function () {
            img_num++;
            if(img_num > 2) {
                img_num = 0;
            }
            showimg(img_num);
        }
       
        function showimg(n) {
            for(let i=0; i<imgs.length; i++) {
                imgs[i].style.display = 'none';
            }
            imgs[n].style.display = "block"
        }
       
        setInterval (prev_bttn.onclick , 2000)
    </script>
</body>

 

우선 <body> 부분은 간단하게 전환될 이미지들과 좌우 버튼을 구현해 주었습니다.

버튼은 "&lang", "&rang" 기호를 사용하여 좌우 화살표 부호를 넣어 주었고 CSS를 통하여 좌우로 정렬하려 합니다.

 

 

        let prev_bttn = document.getElementById('prev');
        let next_bttn = document.getElementById('next');
        let imgs = document.querySelectorAll('#slides img');
        let img_num=0;

우선 각 요소의 값들을 변수에 저 정합니다. 

getElementByid()를 통하여 좌우 버튼에 대한 값을 저장하고 querySelectorAll()을 통하여 #slides의 img들의 값을 배열형태로 가져왔습니다.

imgs의 배열값을 선택하기 위해 img_num를 생성했습니다.

 

 

        function showimg(n) {

            for(let i=0; i<imgs.length; i++) {
                imgs[i].style.display = 'none';
            }
            imgs[n].style.display = "block"
        }
       
        setInterval (prev_bttn.onclick , 2000)
 

화면이 전환되는 동작을 수행하는 함수 showimg()를 생성하였습니다.

변수 n값을 통하여 화면에 출력할 이미지의 배열값을 지정할 수 있도록 합니다.

for문을 통하여 전체 이미지의 display값을 "none"으로 변경하여 화면에 출력되지 않도록 하고 imgs [n]에 대한 display값만 "block"으로 지정하여 화면에 보이도록 설정하였습니다.

setinterval() 함수를 통하여 prev_bttn.onclick 이벤트를 2000밀리 초마다 실행하도록 설정하여 2초마다 자동으로 이미지 전환이 이뤄지도록 하였습니다.

 

버튼 클릭이벤트에 대해서는

        prev_bttn.onclick = function () {
            img_num--;
            if(img_num < 0) {
                img_num = 2;
            }
            showimg(img_num);
        }
        next_bttn.onclick = function () {
            img_num++;
            if(img_num > 2) {
                img_num = 0;
            }
            showimg(img_num);
        }

이미지를 3개 넣어주었기 때문에 이미지 배열은 0~2까지로 onclick 이벤트 발생 시 0에서 -1 이하로, 2에서 3 이상으로 넘어가는 것을 방지해 주기 위해서 if문을 통하여 0~2 안에서만 전환되도록 해주고 버튼을 클릭할 때마다 img_num-- , img_num++ 을 해주어 배열값이 변경되도록 설정해 주었습니다.

그리고 그 변경된 값으로 다시 showimg() 함수를 호출해 주었습니다.

 

 

 

3. CSS

    <style>
        #slideshow {
            overflow: hidden;
            position: relative;
            width: 1200px;
            height: 300px;
            margin: 0 auto;
        }
        #slide {
            position: absolute;
        }
        #slides > img {
            width: 1200px;
            height: 300px;
        }
        button {
            position: absolute;
            height: 300px;
            top: 0;
            border: none;
            padding: 20px;
            background-color: transparent;
            color: #000;
            font-weight: 800;
            font-size: 24px;
            opacity: 0.5;
        }
        #prev {
            left: 0;
        }
        #next {
            right: 0;
        }
        button:hover {
            background-color: #222;
            color: white;
            opacity: 0.6;
            cursor: pointer;
        }
        button:focus {
            border: none;
        }
    </style>

 

        #slideshow {
            overflow: hidden;
            position: relative;
            width: 1200px;
            height: 300px;
            margin: 0 auto;
        }
        #slide {
            position: absolute;
        }
        #slides > img {
            width: 1200px;
            height: 300px;
        }

#slideshow 에서 이미지가 화면을 넘어갔을 때에 화면에 보이지 않게 하기 위해서 overflow속성을 hidden값을 주었고

, position을 relative으로 설정해 주었습니다.

 

        button {
            position: absolute;
            height: 300px;
            top: 0;
            border: none;
            padding: 20px;
            background-color: transparent;
            color: #000;
            font-weight: 800;
            font-size: 24px;
            opacity: 0.5;
        }
        #prev {
            left: 0;
        }
        #next {
            right: 0;
        }
        button:hover {
            background-color: #222;
            color: white;
            opacity: 0.6;
            cursor: pointer;
        }
        button:focus {
            border: none;
        }

버튼은 opacity속성을 통해 투명하도록 설정하였고 left, right 값을 0을 주어 좌우 끝에 붙도록 하였습니다.

마우스가 오버되었을 때에 color와 투명도, 커서모양이 변경되도록 설정하여 주었습니다. 

저작자표시 비영리 변경금지 (새창열림)

'HTML > JAVA SCRIPT' 카테고리의 다른 글

자바 스크립트(JAVA SCRIPT)의 개념과 기본 문법  (0) 2023.03.08

+ Recent posts

티스토리툴바