jquery - mouseover/mouseleave, image slide(좌우), tab menu

*메뉴에 마우스 올렸을때 메뉴들 드롭다운

// nav 메뉴
$("nav > ul > li").mouseover(function () {
    $(this).find(".submenu").stop().slideDown();
});

$("nav > ul > li").mouseleave(function () {
    $(this).find(".submenu").stop().slideUp();
});
// // nav 메뉴 끝



설명
(nav > ul > li)에서 태그를 선택하고 마우스를 올렸을때

$(this).find(".submenu") 여기서 this는 (nav > ul > li) 이다.

this를 find(class명 submenu) 찾아서 slideDown()/ slideUp()을 해준다.

근데 stop() 없이 할 경우 명령이 쌓여서 마우스를 내려도 반복하기때문에

stop().slideDown(); 해당 명령어 앞에 stop()을 써준다.

 

 

*일정 시간마다 이미지를 슬라이드쇼 (좌/우)

// 이미지 슬라이드
var index_img = 0;
setInterval(function () {
    if (index_img < 2) {
        index_img++;
    } else {
        index_img = 0;
    }

    var slide_position = index_img * (-1200) + "px";
    $(".slidelist").animate({
        left: slide_position
    }, 400);
}, 3000);

// // 이미지 슬라이드 끝


설명
이미지 파일이 3장이고 1번부터 시작해야하기때문에 index_img = 0; 변수를 지정해줌
setInterval 메소드를 사용해서 3000 (3초)마다 실행하게 한다.

if문을 보면 index_img (0) < 2 이므로 참이다.
그래서 index_img++ 로 증감을 시켜준다

index_img < 2 여기서 증감을 다하고 index_img가 2가 되면
else가 되어서 index_img를 다시 0으로 바꿔준다.
(계속 처음으로 돌아가 반복 시키기 위함.)

아래쪽에서 이미지 파일의 움직임을 위한 코드들이다.
변수 slide_position에 index_img * (-1200) + px 을 지정한다.

-1200은 슬라이드 width: 1200px 이므로 그림이 왼쪽으로 빠지면서 다른 그림이
오른쪽에서 들어온다.

아래 쿼리문을 보면 class명 slidelist에 animate메소드를 사용해서
left: slide_position 해줌으로 왼쪽으로 이동하고  400은 (0.4초)에 걸쳐 그림이 넘어감

 

 

*탭 메뉴 클릭시 해당하는 게시글 보여줌

// 탭 메뉴
var tabButton = $(".tab-button > ul > li");
var tabContent = $(".tab-content > ul");

    tabContent.hide().eq(0).show();
    tabButton.click(function(e){
        e.preventDefault();
        
        var target = $(this);
        var index = target.index();
        
        tabButton.removeClass("active");
        target.addClass("active");
        
        tabContent.css("display", "none");
        tabContent.eq(index).css("display", "block");
    });
// // 탭 메뉴    


설명
var tabButton, var tabContent 변수 두개를 지정한다

tabContent.hide().eq(0).show();
eq(0)은 자식요소의 순번을 선택할때 사용.(첫번째를 뜻함 인덱스번호 0번)
tabContent을 hide하고 eq(0)은 show()한다. 즉 첫번째는 보이고 나머진 숨김.

tabButton에 이벤트설정.
click 했을때 function(e)에서 파라미터 e는 event 를 말한다.
e 이외에 다른것을 써도 상관없으나 event를 나타내는 관습으로 e를 사용.

e.preventDeafault()는 a링크에 #을 걸었기때문에 링크 이동이 되는데,
이 고유의 기능을 막아주기 위함이다. 저 코드를 사용하면 고요기능이 막힘.

또 다른 변수 var target = $(this) 를 지정해준다. 여기서 this는 tabButton을 말함.
var index = target.index() 는 풀어보면 tabButton(tab-button > ul > li).index(); 이다.

tabButton.removeClass("active")는 tabButton에 있는 클래스를 지워주는것
target.addClass("active") target된 것에 클래스를 만들어준다.

HTML을 참고.
<li class="active"><a href="#">롯데월드소식</a></li>  // 현재는 여기에 active가 있다.
<li><a href="#">뉴스공지</a></li>       // 여기를 클릭하면 

--------------------------------------------------------------------------

<li><a href="#">롯데월드소식</a></li>            // 여기 있던 class="active"가
<li class="active"><a href="#">뉴스공지</a></li>   // 여기에 생긴다.

tabContent.css("display", "none")   // display 를 none으로 안보이게 하고
tabContent.eq(index).css("display", "block");  // target 된건 display를 block해서 보이게한다.