- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
완성된 화면 입니다.
HTML 화면입니다.
<body class="img01 bg01 font10">
<header id="header">
<h1>Javascript slider Effect01</h1>
<p>슬라이드 이펙트 - 트랜지션 효과</p>
<ul>
<li class="active"><a href="sliderEffect01.html">1</a></li>
<li><a href="sliderEffect01.html">2</a></li>
<li><a href="sliderEffect02.html">3</a></li>
<li><a href="sliderEffect03.html">4</a></li>
<li><a href="sliderEffect04.html">5</a></li>
<li><a href="sliderEffect05.html">6</a></li>
</ul>
</header>
<!-- header -->
<main id="main">
<div class="slider_wrap">
<div class="slider_img">
<div class="slider"><img src="./img/silderEffect01-1-min.jpg" alt="이미지1"></div>
<div class="slider"><img src="./img/sliderEffect02-1-min.jpg" alt="이미지1"></div>
<div class="slider"><img src="./img/sliderEffect03-1-min.jpg" alt="이미지1"></div>
<div class="slider"><img src="./img/sliderEffect04-min.jpg" alt="이미지1"></div>
<div class="slider"><img src="./img/sliderEffect05-1-min.jpg" alt="이미지1"></div>
</div>
</div>
</main>
<!-- main -->
<footer id="footer">
<a href="mailto:ture403@gmail.com">ture403@gmail.com</a>
</footer>
<!-- footer -->
</body>css 코드입니다.
/* silder_wrap */
.slider_wrap {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.slider_img {
position: relative;
width: 800px;
height: 450px;
overflow: hidden;
}
.slider {
position: absolute;
left: 0;
top: 0;
transition: all 0.3s;
}
.slider::before {
position: absolute;
left: 5px;
top: 5px;
background: rgba(0,0,0,0.4);
color: #fff;
padding: 5px 10px;
}
.slider:nth-child(1)::before { content: "이미지1";}
.slider:nth-child(2)::before { content: "이미지2";}
.slider:nth-child(3)::before { content: "이미지3";}
.slider:nth-child(4)::before { content: "이미지4";}
.slider:nth-child(5)::before { content: "이미지5";}
.slider:nth-child(1) {z-index: 5;}
.slider:nth-child(2) {z-index: 4;}
.slider:nth-child(3) {z-index: 3;}
.slider:nth-child(4) {z-index: 2;}
.slider:nth-child(5) {z-index: 1;}
JS코드입니다.
<script>
// 선택자
const sliderWrap = document.querySelector(".slider_wrap");
const sliderImg = sliderWrap.querySelector(".slider_img");
const slider = sliderWrap.querySelectorAll(".slider");
let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //전체 이미지 갯수
let sliderInterval = 3000; //이미지 변경되는 간격 시간
</script>
<script>
setInterval(()=> {
// 0 1 2 3 4 0 1 2 3 4 0 //currentIndex
// 1 2 3 4 0 1 2 3 4 0 1 //nextIndex
let nextIndex = (currentIndex +1) % sliderCount;
slider[currentIndex].style.opacity = "0";
slider[nextIndex].style.opacity = "1";
currentIndex = nextIndex;
// console.log(currentIndex);
}, sliderInterval)
</script>
<!-- GASP -->
<script>
setInterval(()=>{
let nextIndex = (currentIndex +1) % sliderCount;
gsap.to(slider[currentIndex], { opacity: 0 })
gsap.to(slider[nextIndex], { opacity: 1 });
currentIndex = nextIndex;
},sliderInterval)
</script>
<!-- 제이쿼리 -->
<script>
setInterval(()=>{
let nextIndex = (currentIndex +1) % sliderCount;
$(".slider").eq(currentIndex).animate({ opacity: 0 },);
$(".slider").eq(nextIndex).animate({ opacity: 1 },);
currentIndex = nextIndex;
},sliderInterval)
</script>
javascript
- 먼저 선택자를 불러옵니다. 그리고 let 변수에 증가될 값,현재슬라이드갯수,슬라이드초를 담은 변수를 설정합니다.
- setInterval 함수를 이용해서 3000 (3초)가 됬을떄 마다 화면이 변경되는걸 작성할겁니다.
- 먼저 지역변수 netxIndex 에 값을 currentIndx에 +1 을 슬라이더갯수로 나눈 값을 저장합니다.
- 그러면 동작이 위에 주석처럼 처리가 됩니다.
- 그러면 slider는 다중선택자여서 배열로 저장이 됩니다. 그럼 값을 currentIndex 값과 nextInex 값을 넣어주면 값이 변경이 됩니다.
- style.opacity값을 0이면 사라지고 1이면 보이게 됩니다. 이걸 반복을하면 이미지가 넘어가지는것 처럼 보여집니다.
GASP
- GSAP로 하면 더 간단하게 작업이 가능합니다. 먼저 CDN을 가져와서 붙입니다.
- 그리고 let nextIndex = (currentIndex +1) % sliderCount setInterval 안에 지역변수로 설정합니다.
- 그리고 gasp.to로 시작해서 안에 먼저 silder값을 적어줍니다. 그다음 대괄호 안에 x라고 씁니다. opactiy : 값을 입력해줍니다.
- 첫번쨰 gsap.to 는 opacity 값을 0으로 된 처음 값을 설정해주었습니다.
- 두번재 gsap.to 는 opacity 값을 1로 된 값을 설정해주었습니다.
- 자바스크립트 코드랑 별 다를게 없습니다.
제이쿼리
- 제이쿼리는 지금은 잘 쓰이지 않고 있는데 그래도 현직에는 많이 남아있어서 쓰임새를 알려고 작성했습니다.
- currentIndex = (currentIndex +1) % $(".slider").length의 코드를 보면 $()안에 바로 클래스명을 쓰면 선언을 굳이 안해도 됩니다.
- $(".slider").eq(currentIndex).animate({ opacity: 0 },)의 코드의 뜻을 설명하겠습니다.
- eq() 메소드는 jQuery에서 사용되는 메소드 중 하나로, 여러 개의 요소 중에서 지정한 인덱스의 요소를 선택하는 역할을 합니다.
- eq()괄호 안에 숫자를 적으면 해당하는 silder로 지정할수있습니다. 예시 eq(2) 2번쨰 슬라이드 선택
- 나머지는 자바스크립트랑 같습니다.