본문 바로가기
꿀팁 공유/└ 웹디자인기능사

슬라이드 이미지 구현 (좌우/상하/페이드인아웃)

by 가을색수달 2020. 6. 3.

웹디자인기능사 시험 날짜는 다가오고~
슬라이드 이미지 움직이게하는게 저한테는 제일 어려운 숙제 ㅠㅠ

원리는 알겠는데 구문 외우는게 너무 헷갈려요 ㅠㅠ...

css('margin-left','-1200px') 이렇게 쓰는거랑 css({'margin-left' : '-1200px'}) 이런 차이 ...?
animate는 animate({marginTop : "-300px"}) 이렇게 쓰고...ㅠㅠ
왜 이렇게 구문을 다 다르게 만들어놔서 날 헷갈리게 하는 것입니까~~?

아무튼 공부할 겸~ 슬라이드 부분만 제작해봤습니닷..!!

 

 

 

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>slide images</title>
    <link type="text/css" rel="stylesheet" href="css/styles.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>


<body>
    <div id="index_01">
        <div id="header1">좌우 슬라이딩</div>
        <div id="slide1">
            <ul>
                <li><a href="#"><img src="img/01.jpg" alt="슬라이드1"></a></li>
                <li><a href="#"><img src="img/02.jpg" alt="슬라이드2"></a></li>
                <li><a href="#"><img src="img/03.jpg" alt="슬라이드3"></a></li>
            </ul>
        </div>
    </div>
    
    <div id="index_02">
        <div id="header2">상하 슬라이딩</div>
        <div id="slide2">
            <ul>
                <li><a href="#"><img src="img/04.jpg" alt="슬라이드4"></a></li>
                <li><a href="#"><img src="img/05.jpg" alt="슬라이드5"></a></li>
                <li><a href="#"><img src="img/06.jpg" alt="슬라이드6"></a></li>
            </ul>
        </div>
    </div>
    
    <div id="index_03">
        <div id="header3">페이드인 페이드아웃</div>
        <div id="slide3">
            <ul>
                <li><a href="#"><img src="img/07.jpg" alt="슬라이드7"></a></li>
                <li><a href="#"><img src="img/08.jpg" alt="슬라이드8"></a></li>
                <li><a href="#"><img src="img/09.jpg" alt="슬라이드9"></a></li>
            </ul>
        </div>
    </div>


    <script type="text/javascript" src="script/slide.js"></script>
</body>

</html>

@charset "UTF-8";

*{
    margin: 0;
    padding: 0;
    font-size: 1rem;
    text-decoration: none;
    list-style: none;
    color: #333333;
}

/*--------좌우슬라이딩---------*/
#index_01{
    width: 1200px;
    height: 400px;
    border: 1px solid dimgrey;
    margin: 0 auto;
}

#header1{
    height: 100px;
    border-bottom: 1px solid dimgrey;
    box-sizing: border-box;
    text-align: center;
    line-height: 100px;
    font-size: 1.5rem;
}

#slide1{
    height: 300px;
    overflow: hidden;
    border-bottom: 1px solid dimgrey;
}
#slide1>ul{
    width: 3600px;
    font-size: 0;
}
#slide1>ul>li{
    display: inline-block;
    font-size: 0;
}

/*--------상하슬라이딩---------*/
#index_02{
    width: 1200px;
    height: 400px;
    border: 1px solid dimgrey;
    margin: 50px auto;
}

#header2{
    height: 100px;
    border-bottom: 1px solid dimgrey;
    box-sizing: border-box;
    text-align: center;
    line-height: 100px;
    font-size: 1.5rem;
}

#slide2{
    height: 300px;
    border-bottom: 1px solid dimgrey;
    overflow: hidden;
}
#slide2>ul{
    height: 900px;
}
#slide2>ul>li{
    height: 300px;
}

/*--------페이드인아웃---------*/
#index_03{
    width: 1200px;
    height: 400px;
    border: 1px solid dimgrey;
    margin: 0 auto;
}

#header3{
    height: 100px;
    border-bottom: 1px solid dimgrey;
    box-sizing: border-box;
    text-align: center;
    line-height: 100px;
    font-size: 1.5rem;
}

#slide3{
    height: 300px;
    border-bottom: 1px solid dimgrey;
}

#slide3>ul>li{
    position: absolute;
    font-size: 0;
}
//좌우슬라이딩
setInterval(function(){
    $('#slide1>ul').delay(2500);
    $('#slide1>ul').animate({marginLeft: "-1200px"})
    $('#slide1>ul').delay(2500);
    $('#slide1>ul').animate({marginLeft: "-2400px"})
    $('#slide1>ul').delay(2500);
    $('#slide1>ul').animate({marginLeft: "0px"})
});


//상하슬라이딩
setInterval(function(){
    $('#slide2>ul').delay(2500);
    $('#slide2>ul').animate({marginTop: "-300px"})
    $('#slide2>ul').delay(2500);
    $('#slide2>ul').animate({marginTop: "-600px"})
    $('#slide2>ul').delay(2500);
    $('#slide2>ul').animate({marginTop: "0px"})
});


//페이드인 페이드아웃

$('#slide3>ul>li').hide();
$('#slide3>ul>li:first-child').show();

setInterval(function(){
    $('#slide3>ul>li:first-child').fadeOut()
    .next().fadeIn().end(1000)
    .appendTo('#slide3>ul');
},3000);

 

 

 

 

※ 21.4.12. 가로 슬라이드 무한 반복 코드 첨부합니다.
(저도 어디서 긁어온건데 정확한 출처 기억안나고.. 문과 문어대가리라 이해가 잘 안감요 ㅋㅋㅋ
시험 볼 때는 위 스크립트만으로도 충분하나.. 무한 슬라이드 구현이 꼭 하고싶다고하면 참고로 하세용~)

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <title>infinity horizon slider</title>
  <style type="text/css">
    *{margin: 0; padding: 0; list-style: none;}
    #slideWrap { width: 300px; height: 150px; border: 5px solid black; overflow: hidden; position: relative; }
    #slider { height: 100%; background-color: yellow; position: absolute;}
    #slider ul { display: inline; }
    #slider li { float: left; width: 300px; height: 100%;}

  </style>
</head>

<body>
  <div id="slideWrap">
    <ul id="slider">
        <li><a href="#"><img src="#" alt="슬라이드1"></a></li>
        <li><a href="#"><img src="#" alt="슬라이드2"></a></li>
        <li><a href="#"><img src="#" alt="슬라이드3"></a></li>
    </ul>
  </div>

  <script>
    //자동 스크롤 애니메이션
    var ul = document.querySelector('#slider')
    var slideNumber = document.querySelector('#slider').childElementCount
    var li = document.querySelector('#slider>li')

    var firstItemClone = ul.firstElementChild.cloneNode(true);
    ul.appendChild(firstItemClone);
    ul.style.width = (slideNumber + 1) * 300 + 'px'

    function move(){
      var i = 0;

      setInterval(function(){
        ul.style.transition = '0.2s';
        ul.style.transform = 'translate3d(-'+300*(i+1)+'px, 0px, 0px)';

        i++;

        if (i == slideNumber){
          setTimeout(function(){
            ul.style.transition = '0s';
            ul.style.transform = "translate3d(0px, 0px, 0px)";
          },201)
          i = 0;
        }
      },3000);
    }

    document.addEventListener("DOMContentLoaded",function(){
      move();
    });

  </script>
</body>

</html>
저작자표시 비영리 변경금지

'꿀팁 공유 > └ 웹디자인기능사' 카테고리의 다른 글

2020 웹디자인기능사 2회 합격 후기 (독학)  (12) 2020.08.13
2020 웹디자인기능사 실기시험 후기  (4) 2020.06.22
JUST 쇼핑몰 두번째 연습  (0) 2020.05.30
탭메뉴 구현 (공지사항/갤러리)  (0) 2020.05.18
메뉴 네비게이션 만들기 (가로)  (0) 2020.05.18

관련글

댓글

티스토리툴바