웹디자인 기능사 연습문제 3

웹디 실기 연습사이트를 만들어 봤어요 ! 

 

 

캡쳐 이미지와 같은 느낌으로 만들었구요 

 

iframe으로 가져오니 화면이 짤리네요 ㅜㅜㅜ

 

전체소스 보기는 요기루  

 

오느른 스크립트만 보구 갈게용

 

$(function(){
    let currentIndex = 0;
    $(".sliderWrap").append($(".slider").first().clone(true));
    setInterval(function(){
        currentIndex++;
        $(".sliderWrap").animate({marginLeft:-100*currentIndex + "%"},600);
        if(currentIndex == 3){
            setTimeout(function(){
                $(".sliderWrap").animate({marginLeft:0},0);
                currentIndex = 0 ;
            },700)
        }
    },3000);

    $(".nav > ul > li").mouseover(function(){
        $(this).find(".submenu").stop().slideDown(200);
    });
    $(".nav > ul > li").mouseout(function(){
        $(this).find(".submenu").stop().slideUp(200);
    });

});

위 이미지를 jquery를 이용해서 처리했어요 슬라이드&sub메뉴를 요렇게 처리했습니다.