클릭하면 해당 부분으로 천천히 이동하도록 하는 기능
<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>
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,
});
};
}
<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>
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);
<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>
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');
};
}
/* Tab Active */
.active{
display:block !important;
}
.tabs .tabs-list li.active{
background-color: #efeff6 !important;
color:black !important;
}
.active a{
color:black !important;
}
<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>
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");
}
/************************
*** 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')
를 통해서!