[Develop] 23.06.13 개발 공부 일지

요약: 제이쿼리를 이용한 슬라이드 기능 구현

일시: 23.06.13 09:30 ~ 18:20

장소: 더휴먼컴퓨터아트아카데미, 집

배운 점:

Jquery

-슬라이드1

$('.slideshow').each(function(){
    // 각각의 slideshow
    let container = $(this);

    function switchImg(){
        // slideshow > img
        let imgs = container.find('img');
        // 첫번째 이미지
        let first = imgs.eq(0);
        // 두번째 이미지
        let second = imgs.eq(1);
        
        // container 안에(뒤쪽에) first 넣기
        // 첫번째 이미지가 뒤로 가면서 두번째 이미지가 첫번째 이미지가 됨.
        first.fadeOut().appendTo(container);
        // 두번째 이미지 보이기
        // 두번째 이후의 이미지들은 계속 display: none 상태
        // ex)
        // 2(block) => 다시 2번이 1번이 됨(let first = imgs.eq(0);)
        // 3(none) => 다시 3번이 2번이 됨(let first = imgs.eq(1);)
        // 4(none)
        // 1(none)
        second.fadeIn();
    }

    // 3초마다 실행
    setInterval(switchImg, 3000)
})

슬라이드2

$('.slideshow').each(function(){
    // 각각의 slideshow
    let container = $(this);
    let timer;

    function switchImg(){

        // slideshow > a
        let anchors = container.find('a');

/*         anchors.each(function(){
            anchors.css('display', 'none')
        }) */
        
        // 첫번째 이미지
        let first = anchors.eq(0);
        // 두번째 이미지
        let second = anchors.eq(1);

        
        
        // container 안에(뒤쪽에) first 넣기
        // 첫번째 이미지가 뒤로 가면서 두번째 이미지가 첫번째 이미지가 됨.
        first.fadeOut().appendTo(container);
        // 두번째 이미지 보이기
        // 두번째 이후의 이미지들은 계속 display: none 상태
        // ex)
        // 2(block) => 다시 2번이 1번이 됨(let first = anchors.eq(0);)
        // 3(none) => 다시 3번이 2번이 됨(let first = anchors.eq(1);)
        // 4(none)
        // 1(none)
        second.fadeIn();
    }

    function startTimer(){
        // clearInterval을 쓰기 위해 변수에 담기
        timer = setInterval(switchImg, 3000)
    }

    function stopTimer(){
        clearInterval(timer)
    }

    container.find('a').hover(stopTimer, startTimer)
    startTimer()
})

슬라이드3

let current1 = 0;
let current2 = 0;
let current3 = 0;
let current4 = 0;
let banner1 = $('#wrap ul.num1>li')
let banner2 = $('#wrap ul.num2>li')
let banner3 = $('#wrap ul.num3>li')
let banner4 = $('#wrap ul.num4>li')
let moveInterval1;
let moveInterval2;
let moveInterval3;
let moveInterval4;

banner_01()
banner_02()
banner_03()
banner_04()

function banner_01() {
    moveFunction1()
    function moveFunction1() {
        moveInterval1 = setInterval(function () {
            let prev = banner1.eq(current1);
            move(prev, 0, '-100%')
            current1++;
            if (current1 == banner1.length) {
                current1 = 0;
            }
            let next = banner1.eq(current1);
            move(next, '100%', '0')
        }, 2000)
    }

    function move(tg, start, end) {
        tg.css('top', start).stop().animate({ top: end }, 500)
    }

    banner1.hover(function () {
        clearInterval(moveInterval1)
    }, function () {
        moveFunction1()
    })
}
function banner_02() {
    moveFunction2()
    function moveFunction2() {
        moveInterval2 = setInterval(function () {
            let prev = banner2.eq(current2);
            move(prev, 0, '-100%')
            current2++;
            if (current2 == banner2.length) {
                current2 = 0;
            }
            let next = banner2.eq(current2);
            move(next, '100%', '0')
        }, 2000)
    }

    function move(tg, start, end) {
        tg.css('bottom', start).stop().animate({ bottom: end }, 500)
    }

    banner2.hover(function () {
        clearInterval(moveInterval2)
    }, function () {
        moveFunction2()
    })
}
function banner_03() {
    moveFunction3()
    function moveFunction3() {
        moveInterval3 = setInterval(function () {
            let prev = banner3.eq(current3);
            move(prev, 0, '-100%')
            current3++;
            if (current3 == banner3.length) {
                current3 = 0;
            }
            let next = banner3.eq(current3);
            move(next, '100%', '0')
        }, 2000)
    }

    function move(tg, start, end) {
        tg.css('right', start).stop().animate({ right: end }, 500)
    }

    banner3.hover(function () {
        clearInterval(moveInterval3)
    }, function () {
        moveFunction3()
    })
}
function banner_04() {
    moveFunction4()
    function moveFunction4() {
        moveInterval4 = setInterval(function () {
            let prev = banner4.eq(current4);
            move(prev, 0, '-100%')
            current4++;
            if (current4 == banner4.length) {
                current4 = 0;
            }
            let next = banner4.eq(current4);
            move(next, '100%', '0')
        }, 2000)
    }

    function move(tg, start, end) {
        tg.css('left', start).stop().animate({ left: end }, 500)
    }

    banner4.hover(function () {
        clearInterval(moveInterval4)
    }, function () {
        moveFunction4()
    })
}

슬라이드 4

let sliderPanerImg = $('.slider-panel> img');
let imgWidth = sliderPanerImg.width();
let imgHeight = sliderPanerImg.height();

$('.slider-text').css('left', -400).each(function (index) {
    $(this).attr('data-index', index)

})

$('.control-button').each(function (index) {
    $(this).attr('data-index', index)
}).click(function () {
    let index = $(this).attr('data-index')
    moveSlider(index)
})

function moveSlider(index) {
    randomNum = index;
    let willMoveLeft = -(index % 3 * imgWidth)
    let willMoveTop = -(Math.floor(index / 3) * imgHeight)
    $('.slider-panel').animate({ left: willMoveLeft }, 500)
    $('.slider-panel').animate({ top: willMoveTop }, 500)
    $('.control-button[data-index=' + index + ']').addClass('active')
    $('.control-button[data-index!=' + index + ']').removeClass('active')

    $('.slider-text[data-index=' + index + ']').show().animate({ left: 50 }, 500)
    $('.slider-text[data-index!=' + index + ']').hide().animate({ left: -400 }, 500)
}

let randomNum = Math.round(Math.random() * 5)
console.log("🚀 ~ file: script.js:27 ~ randomNum:", randomNum)

moveSlider(randomNum)

let setIntervalId;

function timer() {
    setIntervalId = setInterval(function () {
        randomNum++
        if (randomNum == $('.control-button').length) {
            randomNum = 0;
        }
        $('.control-button').eq(randomNum).trigger('click')
    }, 3000)
}

timer()

$('.animation-canvas').hover(function () {
    clearInterval(setIntervalId)
}, function () {
    timer()
})

$('.left').click(function () {
    randomNum--
    if (randomNum < 0) {
        randomNum = $('.control-button').length - 1;
    }
    $('.control-button').eq(randomNum).stop().trigger('click')
})

$('.right').click(function () {
    randomNum++
    if (randomNum == $('.control-button').length) {
        randomNum = 0;
    }
    $('.control-button').eq(randomNum).stop().trigger('click')
})