이미지 슬리이드 JS(fade)

👉이미지 슬리이드 JS(fade)

안녕하세요 TriplexLab 입니다 :)
오늘은 이미지 슬리이드 JS(fade)대해서 살펴보도록 하겠습니다.

 <section id="banner">
   <h2>이미지 페이드 효과</h2>
   <div class="slideList">
     <div class="slideImg"><img src="0.jpg" alt="이미지 설명"></div>
     <div class="slideImg"><img src="1.jpg" alt="이미지 설명"></div>
     <div class="slideImg"><img src="2.jpg" alt="이미지 설명"></div>
   </div>
</section>

 

#banner {position: relative; width: 1200px; margin: 0 auto; text-align: center; overflow: hidden; height: 360px; }
#banner img {width: 100%; display: block;}
#banner h2 {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background: rgba(255,255,255,0.5);
    border-radius: 25px;
    padding: 10px 30px;
}

/* slider */
.slider {position: relative;}
.slider > div {position: absolute; left: 0; top: 0;}
.slider > div img {width: 100%;}
.slideList {position: absolute; top: 0; left: 0; width: 1200px; height: 360px;}

 

var current = 0;    //활성화된 인덱스값 자기자신을 저장해놓는다. 
var slideCount = $(".slideImg").length - 1;
var slidePosition;  // 현재 활성화된 el 자기자신 저장
$(".slideList").children("div:nth-child(n+2)").hide();

var fadeEleHandler = function(el) {
el.find("div").eq(slidePosition).hide();
el.find("div").eq(current).fadeIn();
slidePosition = current;    // slidePosition = 증각하는 값 (current)
}

setInterval(function(){
//var next = (current+1) % $(".slideImg").length;
// 0 + 1 = 1 % 3 = 1    
// 1 + 1 = 2 % 3 = 2
// 2 + 1 = 3 % 3 = 0
if(current < slideCount){
	current++;
} else {
	current = 0;
}
	fadeEleHandler($(".slideList"));
},3000);

fadeEleHandler($(".slideList"));