비주얼 스튜디오 코드 28_ 상하 슬라이드 배너 만들기

728x90

html 골격만들기

ul에 class="list"

li에 class="list_img" 클래스 지정해주기

css 스타일 넣어주기

- 제이쿼리 스니펫 body에 붙여넣기

- 변수- 이름지정해주기

 // 배너 이미지슬라이드
        const banner = $(".banner");
        const list = $(".banner > .list");
        const listImg = $(".banner > .list > .list_img")

        // setInterval(function(){},3000);
        // 3초마다 function(){}를 불러와서 실행시키라는 명령어

-애니메이션 넣어주기

// setInterval(function(){},3000);
        // 3초마다 function(){}를 불러와서 실행시키라는 명령어

        setInterval(function(){

            list.animate({top:"-500px"}, 200, function(){
                $(".list_img:first-child").appendTo(list);
                list.css("top","0");
            });
            

        },3000);

        // list.animate({top:"-500px"}, 200)
        // list값을 위쪽방향으로 500px만큼 움직이는데 0.2초시간이 걸리도록하라.
        
        // $(".list_img:first-child").appendTo(list);
        // 첫번째리스트이미지를 잘라서 . 첫번째리스트를 리스트의 마지막 박스안에 추가시켜줘라

        // list.css("top","0");
        // 리스트의 공간을 top0값으로 가게 하라.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>상하이미지 이동하는 슬라이드</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div id="wrap">
        <div id="header">
            <div class="container">
                <div class="header"></div>
            </div>
        </div>

        <section id="banner">
            <div class="container">
                <div class="banner">
                    <h2>이미지 상하슬라이드</h2>
                    <ul class="list">
                        <li class="list_img"><img src="./img/img01.png" alt="배너이미지01"></li>
                        <li class="list_img"><img src="./img/img02.png" alt="배너이미지02"></li>
                        <li class="list_img"><img src="./img/img03.png" alt="배너이미지03"></li>
                    </ul>
                </div>
            </div>
        </section>

        <section id="contents">
            <div class="container">
                <div class="contents"></div>
            </div>
        </section>

        <div id="footer">
            <div class="container">
                <div class="footer"></div>
            </div>
        </div>
    </div>

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

    <script>
        // 배너 이미지슬라이드
        const banner = $(".banner");
        const list = $(".banner > .list");
        const listImg = $(".banner > .list > .list_img")

        // setInterval(function(){},3000);
        // 3초마다 function(){}를 불러와서 실행시키라는 명령어

        setInterval(function(){

            list.animate({top:"-500px"}, 200, function(){
                $(".list_img:first-child").appendTo(list);
                list.css("top","0");
            });
            

        },3000);

        // list.animate({top:"-500px"}, 200)
        // list값을 위쪽방향으로 500px만큼 움직이는데 0.2초시간이 걸리도록하라.
        
        // $(".list_img:first-child").appendTo(list);
        // 첫번째리스트이미지를 잘라서 . 첫번째리스트를 리스트의 마지막 박스안에 추가시켜줘라

        // list.css("top","0");
        // 리스트의 첫번째 비어진 공간에 top0값으로 가게 하라.
    </script>

</body>
</html>

css

@charset "utf-8";

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a{
    color: #222;
    text-decoration: none;
}

li{
    list-style: none;
}

.clearfix::before,
.clearfix::after{
    clear:both;
    content: "";
    display: block;
}

img{
    display: block;
    /* 이미지가 인라인 구조라서 이미지 사이에 여백이 생기기 때문에 블럭구조로 바꿔줌 */
}

#wrap{}
#header{}
#banner{}
#contents{}
#footer{}

/* container */

.container{
    width: 1200px;
    margin: 0 auto;
    background-color: rgba(255,255,255,0.3);
}

.header{
    height: 100px;
    background-color: lightsalmon;
}

.banner{
    position: relative;
    /*이미지 한장만 보이게하기*/
    width: 1200px;
    height: 500px;
    overflow: hidden;
}
.banner h2{
    position: absolute;
    background-color: rgba(255,255,255,0.6);
    font-size: 24px;
    padding: 20px;
    top: 10px;
    left: 10px;
}
.banner .list{
    width: 1200px;
    height: 1500px;
    /* 이미지를 공중에 띄워놓아야함 */
    position: relative;
    /* .list가 움직여야지 슬라이드가 올라감 */
}

.banner .list .list_img{
    width: 1200px;
    height: 500px;
}

.banner .list .list_img img{
    /* width: 100%; */
}

.contents{
    height: 200px;
    background-color: lightgray;
}

.footer{
    height: 100px;
    background-color: lightskyblue;
}

예제2

728x90

저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드 30 _ 마우스오버 효과 ⑤ (0)	2023.06.14
비주얼 스튜디오 코드 29 _ 마우스오버 효과 복습 (0)	2023.06.14
비주얼 스튜디오 코드 27_ 태그 명령 줄여서 쓰기 , 반응형 (0)	2023.06.13
비주얼 스튜디오 코드 26 _ 마우스오버 효과④ (0)	2023.06.13
비주얼 스튜디오 코드 25_ 탭 메뉴 ② (1)	2023.06.12