비주얼 스튜디오 코드 31_ 상하 / 좌우 슬라이드 배너

☭DEVELOPER/#2 웹개발(자바기반 풀스택)

비주얼 스튜디오 코드 31_ 상하 / 좌우 슬라이드 배너

조반짝 2023. 6. 14. 13:54

728x90

01 상하 슬라이드

html > 골격 만들어주기

css> reset 하기

css 에 .container / 클래스 태그 style 넣어주기

● 변수 지정 : const / let 으로 이름 지정가능

●setInterval: 일정시간 간격으로 애니메이션을 반복할 수 있다.

<html>

<!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">
                <section class="header"></section>
            </div>
        </div>
        <div id="banner">
            <div class="container">
                <section class="banner">
                    <h2>이미지 상하로 이동하는 슬라이드</h2>
                    <ul class="list">
                        <li class="list_img">
                            <img src="./img/banner01.png" alt="우주이미지1">
                        </li>
                        <li class="list_img">
                            <img src="./img/banner02.png" alt="우주이미지2">
                        </li>
                         <li class="list_img">
                            <img src="./img/banner03.png" alt="우주이미지3">
                        </li>
                         <li class="list_img">
                            <img src="./img/banner04.png" alt="우주이미지4">
                        </li>
                    </ul>
                </section>
            </div>
        </div>
        <div id="contents">
            <div class="container">
                <section class="contents"></section>
            </div>
        </div>
        <div id="footer">
            <div class="container">
                <section class="footer"></section>
            </div>
        </div>
    </div>

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

    <script>
        // 이미지슬라이드 _ 상하이동

        const list = $(".banner > .list");
        const listImg = $(".banner > .list > .list_img");

        setInterval(function(){
            list.animate({top:"-600px"},200,function(){
                $(".list_img:first-child").appendTo(list);
                // 첫번째 이미지를 잘라서 list에 넣어줘라
                list.css("top","0");
            });
        },3000);
    </script>

<css>

@charset "utf-8";

/* reset */

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

li{
    list-style: none;
}

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

img{
    display: block;
}

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

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

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

/* header */
.header{
    width: 100%;
    /* 생략가능 */
    height: 100px;
    background-color: lightblue;
}

/* banner */
.banner{
    width: 1200px;
    height: 600px;
    overflow: hidden;
    position: relative;
}
.banner h2{
    background-color: rgba(255,255,255,0.2);
    /* 박스 안쪽 여백 */
    padding: 20px;
    font-size: 30px;
    color: lightgrey;

    /* 박스 위치 설정 */
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);

    /* h2위치 배너이미지 위로 보내기 */
    z-index: 10;
}
.banner .list{
    width: 1200px;
    height: 2400px;
    /* ul.list 전체 4장의 배너이미지의 높이값 넣어줘야함  */
    position: relative;
}
/* ul의 이름이기 때문에 ul.list 바로 붙여서써줌 > ul태그 생략가능 */


.banner .list li{}
.banner .list .list_img {
    width: 1200px;
    height: 600px;
}
.banner .list .list_img img{
    display: block;
    width: 100%;
}


/* contents */
.contents{
    width: 100%;
    height: 400px;
    background-color: lightpink;
}

/* footer */
.footer{
    width: 100%;
    height: 100px;
    background-color: lightcyan;
}

02 좌우 슬라이드

상하 슬라이드와 마찬가지로 html을 똑같이 써준다.

<css에 style 넣기>

<html>

<!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">
                <section class="header"></section>
            </div>
        </div>
        <div id="banner">
            <div class="container">
                <section class="banner">
                    <h2>이미지 좌우로 이동하는 슬라이드</h2>
                    <ul class="list clearfix">
                        <li class="list_img">
                            <img src="./img/banner01.png" alt="우주이미지1">
                        </li>
                        <li class="list_img">
                            <img src="./img/banner02.png" alt="우주이미지2">
                        </li>
                         <li class="list_img">
                            <img src="./img/banner03.png" alt="우주이미지3">
                        </li>
                         <li class="list_img">
                            <img src="./img/banner04.png" alt="우주이미지4">
                        </li>
                    </ul>
                </section>
            </div>
        </div>
        <div id="contents">
            <div class="container">
                <section class="contents"></section>
            </div>
        </div>
        <div id="footer">
            <div class="container">
                <section class="footer"></section>
            </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(){
            list.animate({left:"-1200px"},200,function(){
               
                $(".list_img:first-child").appendTo(list);
                list.css("left","0");
            });
            
        },3000);
    </script>
</body>
</html>

<css>

@charset "utf-8";

/* reset */

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

li{
    list-style: none;
}

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

img{
    display: block;
}

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

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

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

/* header */
.header{
    width: 100%;
    /* 생략가능 */
    height: 100px;
    background-color: lightblue;
}

/* banner */
.banner{
    width: 1200px;
    height: 600px;
    position: relative;
    overflow: hidden;
}
.banner h2{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: rgba(255,255,255,0.3);
    color: lightgrey;
    padding: 20px;
    border-radius: 20px;
}
.banner .list{
    width: 4800px;
    /* 너비값을 3600으로 해줘야 float했을 때 옆으로감 */
    height: 600px;
    position: relative;
}
.banner .list .list_img{
    width: 1200px;
    height: 600px;
    float: left;
    /* 이미지를 옆으로 나열하기 위함 > html에 ul(부모)에 clearfix를 넣어줘야한다. */
}
.banner .list .list_img img{}


/* contents */
.contents{
    width: 100%;
    height: 400px;
    background-color: lightpink;
}

/* footer */
.footer{
    width: 100%;
    height: 100px;
    background-color: lightcyan;
}

728x90

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

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

비주얼 스튜디오 코드 33 _ 프로필 카드 만들기 (0)	2023.06.15
비주얼 스튜디오 코드 32 _ 베지에곡선 사용하기 (0)	2023.06.14
비주얼 스튜디오 코드 30 _ 마우스오버 효과 ⑤ (0)	2023.06.14
비주얼 스튜디오 코드 29 _ 마우스오버 효과 복습 (0)	2023.06.14
비주얼 스튜디오 코드 28_ 상하 슬라이드 배너 만들기 (0)	2023.06.13

현재글비주얼 스튜디오 코드 31_ 상하 / 좌우 슬라이드 배너

조반짝의 도전일지

공부, 취미, 여행 모두 경험해보고 싶은 조반짝의 도전일지입니다. ✨contact_ looby777@naver.com ✨Instagram_holylovuuu_illust

position, if문, float, 비주얼스튜디오코드, Parallax, HTML, SQL, 이클립스, 웹디자인, 자바스크립트, JavaScript, CSS, 프론트엔드, ACTIVE, Java, offset, 코딩테스트, 자바, media, For문,

Today :
Yesterday :

조반짝의 도전일지