2. 실습

1. 내비게이션 기능

클릭하면 해당 부분으로 천천히 이동하도록 하는 기능

HTML 본문

<header>
<h1 class="logo">
    하트여왕 크로켓경기
</h1>
<nav>
    <ul>
       <li><a href="#intro">크로켓</a></li>
       <li><a href="#team">선수</a></li>
       <li><a href="#photo">사진</a></li>
    </ul>
</nav>

</header>

Script

var aTags = document.querySelectorAll('header a');
for (var i = 0; i < aTags.length; i++) {
  aTags[i].onclick = function (e) {
    e.preventDefault();
    var target = document.querySelector(this.getAttribute('href'));

    window.scrollTo({
      behavior: 'smooth', 
      top: target.offsetTop,
    });
  };
}

2. 이미지 슬라이드(1)

HTML 본문

    <div id="slider">
        <ul class="slides">
            <li class="slide"><img src="img/image1.jpg" alt=""></li>
            <li class="slide"><img src="img/image2.jpg" alt=""></li>
            <li class="slide"><img src="img/image3.jpg" alt=""></li>
            <li class="slide"><img src="img/image4.jpg" alt=""></li>
            <li class="slide"><img src="img/image5.jpg" alt=""></li>
            <li class="slide"><img src="img/image1.jpg" alt=""></li>
        </ul>
    </div>

Script

var slider = document.querySelector('#slider');
var slides = slider.querySelector('.slides');
var slide = slides.querySelectorAll('.slide');

var currentSlide = 0;

setInterval(function () {
  var from = -(1024 * currentSlide);
  var to = from - 1024;
  slides.animate(
    {
      marginLeft: [from + 'px', to + 'px'],
    },
    {
      duration: 500,
      easing: 'ease',
      iterations: 1,
      fill: 'both',
    }
  );
  currentSlide++;
  if (currentSlide === slide.length - 1) {
    currentSlide = 0;
  }
}, 3000);

3. 탭 버튼 기능

HTML 본문

	<div class="tabs">
          <ul class="tabs-list">
            <li class="active"><a href="#tab1">소개</a></li>
            <li><a href="#tab2">승패</a></li>
            <li><a href="#tab3">아웃</a></li>
          </ul>

          <div id="tab1" class="tab active">
            <h3>소개</h3>
            <p>
              설명 1
            </p>
          </div>
          
          <div id="tab2" class="tab">
            <h3>승패</h3>
            <p>
              설명 2
            </p>
          </div>
          
          <div id="tab3" class="tab">
            <h3>아웃</h3>
            <p>
              설명 3
            </p>
          </div>
     </div>

Script

var links = document.querySelectorAll('.tabs-list li a');
var items = document.querySelectorAll('.tabs-list li');

for (var i = 0; i < links.length; i++) {
  links[i].onclick = function (e) {
    e.preventDefault();
  };
}

for (var i = 0; i < items.length; i++) {
  items[i].onclick = function () {
    var tabId = this.querySelector('a').getAttribute('href');
    console.log(this.classList);
    document
      .querySelectorAll('.tabs-list li, .tabs div.tab')
      .forEach(function (item) {
        item.classList.remove('active');
        console.log(item);
      });
    document.querySelector(tabId).classList.add('active');
    this.classList.add('active');
  };
}

CSS

/* Tab Active */
.active{
    display:block !important;
}
.tabs .tabs-list li.active{
    background-color: #efeff6 !important;
    color:black !important;
}
.active a{
    color:black !important;
}

4. 이미지 슬라이드(2)

HTML 본문

    <section id="photo">

        <div class="title">
            <h2>사진</h2>
            <p>
                2018 엘리스 하트여왕 크로켓경기의 사진을 공개합니다.
            </p>
        </div>

        <div class="slider">


            <div class="slide active"></div>
            <div class="slide"></div>
            <div class="slide"></div>

        </div>
        
        <p class="left-arrow"></p>
        <p class="right-arrow"></p>

    </section>

Script

document.querySelector(".right-arrow").onclick = function () {
    var currentSlide = document.querySelector("#photo .slide.active");
    var nextSlide = currentSlide.nextElementSibling;
    if (nextSlide === null) {
        nextSlide = currentSlide.parentElement.firstElementChild;
    }
        currentSlide.animate({
        opacity: [1, 0]
    }, {
        duration: 500,
        easing: "ease",
        iterations: 1,
        fill: "both"
    });
    currentSlide.classList.remove("active");
    nextSlide.animate({
        opacity: [0, 1]
    }, {
        duration: 500,
        easing: "ease",
        iterations: 1,
        fill: "both"
    });
    nextSlide.classList.add("active");
}

document.querySelector(".left-arrow").onclick = function () {
    var currentSlide = document.querySelector("#photo .slide.active");
    var prevSlide = currentSlide.previousElementSibling;
    if (prevSlide === null) {
        prevSlide = currentSlide.parentElement.lastElementChild;
    }
    currentSlide.animate({
        opacity: [1, 0]
    }, {
        duration: 500,
        easing: "ease",
        iterations: 1,
        fill: "both"
    });
    currentSlide.classList.remove("active");
    prevSlide.animate({
        opacity: [0, 1]
    }, {
        duration: 500,
        easing: "ease",
        iterations: 1,
        fill: "both"
    });
    prevSlide.classList.add("active");
}

CSS

/************************
*** Click Image Slider ***
************************/
#photo .slider {
    position: relative;
    width: 100%;
    height: 400px;

    margin-bottom: 10px;
}

#photo .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
}

#photo .slide:nth-child(1) {
    background: url("../img/img_click1.jpg") no-repeat center;
    background-size: cover;
}

#photo .slide:nth-child(2) {
    background: url("../img/img_click2.jpg") no-repeat center;
    background-size: cover;
}

#photo .slide:nth-child(3) {
    background: url("../img/img_click3.jpg") no-repeat center;
    background-size: cover;
}

#photo .slide.active {
    display: block;
}

#photo .left-arrow {
    position: absolute;

    width: 22px;
    height: 22px;
    background: url("../img/img_arrow-left.png");

    left: 20px;

    cursor: pointer;
}

#photo .right-arrow {
    position: absolute;

    width: 22px;
    height: 22px;
    background: url("../img/img_arrow-right.png");

    right: 20px;

    cursor: pointer;
}

결론

active 클래스를 잘 이용하자! 뭐를 통해서? xxx.classList.remove('active'), xxx.classList.add('active') 를 통해서!