[Spring Project] 도서관만들기 #1 Home 페이지 Front 제작

※ 블로그포스팅과 실제 프로젝트 진행률이 일치하지않습니다.

 1. Home 페이지 Front부분 제작

   - 슬라이드 및 메뉴숨김/표시 , 팝업 등의 기본적인 화면표시 스크립트 작동

2. 주요기능 
   2-1 팝업닫기(쿠키사용)

  function popupCheck(){                                  // 각 버튼 클릭시 1 , 7일 동안 지속되는 쿠키생성

    $("#select1").click(function(){

        $.cookie('popup1_oneday','ok',{

            expires:1,

            path:'/'

        })

        $("#popup_1").hide()

    })

    $("#select2").click(function(){

        $.cookie('popup1_oneweek','ok',{

            expires:7,

            path:'/'

        })

        $("#popup_1").hide()

    })

    $("#select3").click(function(){

        $.cookie('popup2_oneday','ok',{

            expires:1,

            path:'/'

        })

        $("#popup_2").hide()

    })

    $("#select4").click(function(){

        $.cookie('popup2_oneweek','ok',{

            expires:7,

            path:'/'

        })

        $("#popup_2").hide()

    })

}

function cookieCheck(){                                     //쿠키가 존재할 시 팝업창 표시하지않

    if( $.cookie('popup1_oneday') === 'ok'){

        $("#popup_1").hide()

    }

    if( $.cookie('popup1_oneweek') === 'ok'){

        $("#popup_1").hide()

    }

    if( $.cookie('popup2_oneday') === 'ok'){

        $("#popup_2").hide()

    }

    if( $.cookie('popup2_oneweek') === 'ok'){

        $("#popup_2").hide()

    }

}

   2-2 슬라이드(bxSlider , interval)

function familySiteBxSlider(){                                        //   bxSlider 기본설정 및 따로만든 버튼에 앞,뒤,정지등의 기능 부여

    var slider = $("#ulul").bxSlider({

        auto:true,

        minSlides:6,

        maxSlides:6,

        moveSlides:1,

        slideWidth:200,

        slideMargin:10,

        pager:false,

        controls:false,

        speed:1000,

        pause:2000,

    })

    $("#family_slide_prev").click(function(){

        slider.goToPrevSlide();

        return false;

    })

    $("#family_slide_next").click(function(){

        slider.goToNextSlide();

        return false;

    })

    $("#family_slide_control_stop").click(function(){

        slider.stopAuto();

        $("#family_slide_control_stop").hide()

        $("#family_slide_control_start").show()

        return false;

    })

    $("#family_slide_control_start").click(function(){

        slider.startAuto();

        $("#family_slide_control_start").hide()

        $("#family_slide_control_stop").show()

        return false;

    })

}

function movieBxSlider(){                                   //기본 bxSlider 활용

    $("#movieSlide").bxSlider({

        auto:true,

        pager:false,

        controls:false,

        autoControls:false,

        speed:1000,

        pause:2000,

        minSlides:1,

        maxSlides:1,

        moveSlides:1

    })

}

var slideInterval = setInterval(slide,1000)

var count = 0

function slide(){                                                            // setInterval을 활용한 수제슬라이드

    if(count!=6) {

        $(".slide_img").removeClass('show')

        $(".slide_img").eq(count+1).addClass('show')

        if(count==5) {

            $(".slide_img").eq(5).removeClass('show')

            $(".slide_img").eq(0).addClass('show')

        }

        count++

    }

     if(count == 6) {

        count=0

    }

    var Mcount = (count/6).toFixed(2)

    var Mcount2 = Mcount.toString().split('.')[1]

    if(count <0 && Mcount2 == 17){  //마이너스의 경우 나눗셈으로 무한해결하기

        $("#slideNum > span").text(6)

    } else if(count <0 && Mcount2 == 33) {

        $("#slideNum > span").text(5)

    } else if(count <0 && Mcount2 == 50) {

        $("#slideNum > span").text(4)

    } else if(count <0 && Mcount2 == 67) {

        $("#slideNum > span").text(3)

    } else if(count <0 && Mcount2 == 83) {

        $("#slideNum > span").text(2)

    } else if(count <0 && Mcount2 == 00) {

        $("#slideNum > span").text(1)

    } else{

        $("#slideNum > span").text(count+1)

    }

   

}

function slideBtn(){

    $("#slide_play").click(slidePlay)

    $("#slide_stop").click(slideStop)

    $("#slide_prev").click(slidePrev)

    $("#slide_next").click(slideNext)

}

function slidePlay(){

    $("#slide_play").hide()

    $("#slide_stop").show()

    clearInterval(slideInterval)

    slideInterval = setInterval(slide,1000)

}

function slideStop(){

    $("#slide_play").show()

    $("#slide_stop").hide()

    clearInterval(slideInterval)

}

function slidePrev(){

    clearInterval(slideInterval)

    count = count-2

    slide()

    slidePlay()

}

function slideNext(){

    clearInterval(slideInterval)

    slide()

    slidePlay()

}