웹디자인 기능사 실기 자동 슬라이드 top / html css jQuery

웹디자인 기능사 실기 자동 슬라이드 top / html css jQuery

 

다가오는 웹디자인 기능사 실기를 앞두고 개인적으로 학원을 다니는 사람들, 국비 지원을 받아서 학원을 다니는 사람들 혹은 혼자 독학을 하고 있는 사람들이 있을 거예요!

저는 혼자 독학을 하고 있는 분들을 위해 기본적인 설명부터 자세하게 다뤄 볼까 합니다!

오늘 배워 볼 코드 소스는 html과 css, jQuery를 이용해서 만들어 볼 거예요.

jQuery 소스는 head부분에 아래 소스 넣고 js 파일 연결해서 사용하시면 됩니다.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 

html 소스

 

<div id="slide">
    <div class="slidebanner">
        <ul>
            <li><img src="http://placehold.it/1200x300/332255?text=slide1" alt="slide1"></li>
            <li><img src="http://placehold.it/1200x300/339944?text=slide2" alt="slide2"></li>
            <li><img src="http://placehold.it/1200x300/334488?text=slide3" alt="slide3"></li>
        </ul>
    </div>
</div>

 

가운데 정렬해줄 slide 영역을 만들어주고

 

overflow: hidden을 잡아줄 slidebanner 영영도 잡아주고 <ul> , <li>를 통해 이미지를 넣어주었습니다.

 

 

 

css 소스

 

div#slide {
    width: 1200px;
    margin: 0 auto;
}
div#slide div.slidebanner {
    width: 1200px;
    height: 300px;
    overflow: hidden;
}
div#slide div.slidebanner ul {
    width: 1200px;
    height: 900px;
    position: relative;
}
div#slide div.slidebanner ul li {
    width: 1200px;
    height: 300px;
    float: left;
}

 

sldie 영역을 가운데로 보내주고

 

slidebanner 영역을 1200 / 300을 잡고 overflow : hidden을 주어 넘어가는 영역은 보이지 않게 해 줍니다.

 

<ul>에 height: 900을 주어서 <li>가 밑으로 내려오게 영역을 잡아주고 부드러운 슬라이드를 위해 position: relative를 잡아줍니다.

 

<li>에 사진의 크기 값을 주고 float: left로 공간에서 띄워줍니다.

 

 

jQuery 소스

 

$(document).ready(function(){
    
    setInterval(function(){
        $('div.slidebanner ul').animate({
            top: "-300"
        },1000,function(){
            $('div.slidebanner ul').append($('div.slidebanner ul li').eq(0));
            $('div.slidebanner ul').css("top",0);
        })
    },3000);
})

 

 

jQuery 시작할 준비를 하고 

 

    몇 초 동안(할 일

        선택자. animate(

             위로 : "수치"

        },1초 동안, 할 일(

             선택자. 추가({선택자. 첫 번째로);

             선택자. css("위로", 수치)

   },3초 동안);

})

 

이렇게 이해하시면 됩니다.

 

 

선택자는 , 움직임을 줘야 할 박스인 <ul>을 잡아주고

 

300만큼 위로 올라가면서 위에 남아있어야 할 <li>를 0번째로 돌아가게 만들고

 

300만큼 위로 올라가면서 top : -300이 된 ul의 css를 top : 0으로 잡아주는 코드입니다.

 

 

 

이해해 보니까 쉽지 않나요?

 

영상 오류가 있어서 저녁에 수정 후 업로드하겠습니다.