자바스크립트로 슬라이드 fade-in효과 만들기

자바스크립트 또는 제이쿼리를 이용하여 fade-in효과가 있는 간단한 슬라이드를 만드는 두가지 방법에 대해 작성한다.

 

 

1. 자바스크립트로 슬라이드 fade-in 효과 만들기

단순히 제이쿼리로 만들었을 때와 동일하게 보이기 위해서 닷 메뉴와 화살표 아이콘이 없다.

CSS @keyframes를 통해 fade-in 효과를 만들었다.

See the Pen Untitled by ssoa1111 (@ssoa1111) on CodePen.

 

 

2. 제이쿼리로 슬라이드 fade-in 효과 만들기

별 다른 CSS효과 없이 제이쿼리 CDN을 HTML에 삽입하고 js파일에 이 내용을 그대로 써주면 된다.

$(function(){
	///////slide
    // 전체 이미지 숨기기
    $('#slide ul img').hide();
    // 첫번째 이미지 fadeIn();
    $('#slide ul img:first').fadeIn();
    
    // 이미지 개수
    let img = 2;
    // 현재 위치
    let now = 0;
    
    // 3초 반복실행
    setInterval(function(){
        now = (now == img) ? 0 : now +=1;
        $('#slide img').eq(now-1).fadeOut();
        $('#slide img').eq(now).fadeIn();
    },3000);
})