웹디자인 기능사 실기 슬라이드 아래에서 위로

소스 보기

Javascript

HTML

CSS


$(function(){
    let currentIndex = 0;   //현재 이미지 설정
    $(".sliderWrap").append($(".slider").first().clone(true));  //첫번째 이미지를 복사해서 마지막에 추가

    setInterval(function(){     //3초에 한번씩 실행   
        currentIndex++;     //현재 이미지를 1씩 증가
        $(".sliderWrap").animate({marginTop: -currentIndex * 300 + "px"}, 600);     //이미지 애니메이션

        if(currentIndex == 3){  //마지막 이미지
            setTimeout(function(){
                $(".sliderWrap").animate({ marginTop:0 }, 0);   //애니메이션 초기화
                currentIndex = 0;   //현재 이미지를 초기화
            }, 700)
        }
    }, 3000);
});

<div id="wrap">
<header id="header">
    <h1 class="logo"></h1>
    <nav class="nav"></nav>
</header>
<!-- //header -->

<article id="slider">
</article>
<!-- //slider -->

<main id="contents">
    <section class="content1"></section>
    <section class="content2"></section>
    <section class="content3"></section>
</main>
<!-- //contents -->

<footer id="footer">
    <div class="footer1"></div>
    <div class="footer2"></div>
    <div class="footer3"></div>
</footer>
<!-- //footer -->
</div>
<!-- //wrap -->

        * {
    margin: 0;
    padding: 0;
    font-family: 'GmarketSans';
}
#wrap {
    width: 1200px;
    margin: 0 auto;
}
#header {
    width: 100%;
    height: 100px;
    display: flex;
}
.header {
    width: 20%;
    background-color: #eae4e9;
}
.nav {
    width: 80%;
    background-color: #fff1e6;
}
#slider {
    width: 100%;
    height: 300px;
    background-color: #d9d9d9;
}
/* slider */
#slider {
    overflow: hidden;
}
.sliderWrap .slider {
    position: relative;
}
.sliderWrap .slider img {
    vertical-align: top;
}
.sliderWrap .slider span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0,0,0,0.3);
    color: #fff;
    padding: 10px 20px;
}
#article {
    width: 100%;
    height: 300px;
    display: flex;
}
.a1 {
    width: 33.333%;
    background-color: #f9d4d6;
}
.a2 {
    width: 33.333%;
    background-color: #e2ece9;
}
.a3 {
    width: 33.333%;
    background-color: #bee1e6;
}
#footer {
    width: 100%;
    height: 100px;
    display: flex;
}
.f1 {
    width: 20%;
    background-color: #f0efeb;
}
.f2 {
    width: 60%;
    background-color: #dfe7fd;
}
.f3 {
    width: 20%;
    background-color: #cddafd;
}

이미지1

이미지2

이미지3

공지사항

배너

바로가기