본문 바로가기
Js

웹디자인기능사 실기 제이쿼리 부분

by 영감은어디에 2024. 6. 29.

 

$(function(){

    //slide
    var count = 0;
    function slide(){
        if(count<2){
            count++;
        }else{
            count = 0;
        } 
        $(".slide ul li").fadeOut();
        $(".slide ul li").eq(t).fadeIn();
    }
    setInterval(slide, 3000);

    //nav menu
    $("nav>ul>li").mouseenter(function(){
        $(this).find(".sub").stop().slideDown();
    })
    $("nav>ul>li").mouseleave(function(){
        $(".sub").stop().slideUp();
    })

    //menu tab key
    $("nav>ul>li>a").focusin(function(){
        $(this).next().slideDown();
        $(this).parent().addClass("on");
    })
    $(".sub li:last-child").focusout(function(){
        $(".sub").slideUp("on");
        $("nav>ul>li").removeClass("on");
    })

    //board tab 
    var i = 0;
    $(".boardTab>li").click(function(){
        $(".boardTab>li").removeClass("on");
        $(this).addClass("on");
        var i = $(this).index();
        $(".tabContent").hide();
        $(".tabContent").eq(i).show();
        return false;
    })
    
    //modal popup
    $(".popupLink").click(function(){
        $(".popup").show();
        $(".popupBg").show();
        return false;
    })
    $(".close").click(function(){
        $(".popup").hide();
        $(".popupBg").hide();
        return false;
    })


    
})

슬라이드 옆으로 움직일 경우 

function slide(){
    $(".slide ul").animate({left:"-1200px"}, 1000, function(){
        $(".slide ul").append($(".slide ul li").first());
        $(".slide ul").css({left:0});
    });
}
setInterval(slide, 3000);