1. 제이쿼리 사용 - 수협은행 슬라이드

- 원본

- 기존

기존 스크립트

	<script>
		$(".gnb .menu1").hover(
			function() {
				$(".menu1 .gnb_wrap").addClass("on");
			},
			function() {
				$(".gnb_wrap").removeClass("on");
			});
		$(".gnb .menu2").hover(
			function() {
				$(".menu2 .gnb_wrap").addClass("on");
			},
			function() {
				$(".gnb_wrap").removeClass("on");
			});
		$(".gnb .menu3").hover(
			function() {
				$(".menu3 .gnb_wrap").addClass("on");
			},
			function() {
				$(".gnb_wrap").removeClass("on");
			});
		$(".gnb .menu4").hover(
			function() {
				$(".menu4 .gnb_wrap").addClass("on");
			},
			function() {
				$(".gnb_wrap").removeClass("on");
			});
		$(".gnb .menu5").hover(
			function() {
				$(".menu5 .gnb_wrap").addClass("on");
			},
			function() {
				$(".gnb_wrap").removeClass("on");
			});
		$(".gnb .menu6").hover(
			function() {
				$(".menu6 .gnb_wrap").addClass("on");
			},
			function() {
				$(".gnb_wrap").removeClass("on");
			});
		$(".gnb .menu7").hover(
			function() {
				$(".menu7 .gnb_wrap").addClass("on");
			},
			function() {
				$(".gnb_wrap").removeClass("on");
			});
		$(".gnb .menu8").hover(
			function() {
				$(".menu8 .gnb_wrap").addClass("on");
			},
			function() {
				$(".gnb_wrap").removeClass("on");
			});
		$(".gnb .menu9").hover(
			function() {
				$(".menu9 .gnb_wrap").addClass("on");
			},
			function() {
				$(".gnb_wrap").removeClass("on");
			});
		$(".gnb .menu10").hover(
			function() {
				$(".menu10 .gnb_wrap").addClass("on");
			},
			function() {
				$(".gnb_wrap").removeClass("on");
			});
		$(".gnb .menu11").hover(
			function() {
				$(".menu11 .gnb_wrap").addClass("on");
			},
			function() {
				$(".gnb_wrap").removeClass("on");
			});

	</script>

2.Target

2-1. This time

1) 헤드

• 헤드 .hover 시 상세 메뉴가 나타나는 제이쿼리 코드가 하나씩 따로 선택되었습니다. 제이쿼리 this 속성을 사용하여 변수로 값을 지정하여 자동화를 만듭니다.
  • 탐색자 parent() , siblings() 를 통한 선택 및 초기화
  • .addClass() 혹은 .css()로 구현하기.

2) 섹션1

• 슬라이드 효과 구현 및 변수값에 따른 선택자 및 속성 전환
  • <ul> 에 .animate() 와 position:값을 주어 슬라이드의 움직임을 구현합니다.
  • .addClass() 과 transition를 사용하여 선택된 <li>의 사이즈를 전환합니다.
• 슬라이드 자동화
  • setInterval() 을 사용하여 반복 및 자동 움직임 구현.
  • 움직임이 회전하는 것 처럼 보이기 위해 첫번째 <li>을 .clone() 하여 appand() 합니다.

2-2 Next Time

1) 섹션1

• 콘텐츠의 추가적인 움직임 구현
  • 기본 위치 position:값과 .animate 로 움직임 구현.
• 선택된 <li>의 움직임 구현.
  • 옆으로 바로 css()로 커지고 위로는 .animate 를 사용
  • 콜백함수의 사용
• 네비게이션바
  • <li>갯수에 맞는 네비게이션바 구현
  • 정지, 재생 버튼 구현

3. Feedback

• 제이쿼리 기본 문법에 대한 실수가 있었습니다.
• 슬라이드 포지션값 지정시 기존 position:relative 라면 좌표 기준이 요소로 잡히기 때문에 right 값을 사용해도 구성이 가능하지만 잘못 이해함.
• transition: 을 사용하면 움직임이 없어야할 때도 계속 적용되기 때문에 2차적으로 초기화해야하는 어려움이 있을 수 있습니다.
  • 움직임의 변화에 따라 맞는 코드를 사용하도록 합니다.
  • 기본값이 변하면서 애니메이션이 사용된다면 각각 스크립트 속성을 넣어 사용해줍니다.

4. Result

• 헤드 완료
• 슬라이드 단순 동작 반복 및 선택된
• 의 사이즈 addClass 와 transition 사용 -> 트랜지션 초기화 못하고 끝나서 움직임의 차이 발생.

<script>
        /* 변수 선언 */
        var sm = 0;
        
        /* 헤드 상세 메뉴 */
        $(".gnb > ul > li").hover(function() {
            $(this).children("div").addClass("on");
        }, function() {
            $(this).children("div").removeClass("on");
        });
        
        /* 비주얼섹션 슬라이드 */
        $("#main ul").append($("#main li:first-child").clone());
        function auto() {
            sm++;    
            if (sm >= 5) {
                $("#main ul").animate({"left": -440 * (sm +1) + 220 },1000,function(){
                    $(this).css({"left":0});
                });
                $("#main li").eq(sm).siblings().removeClass("m_on");
                $("#main li:last-child").addClass("m_on");
                sm = 0;
                $("#main li").eq(sm).addClass("m_on");
            } else {
                $("#main ul").animate({"left": -440 * sm}, 1000);
                $("#main li").eq(sm).siblings().removeClass("m_on")
                $("#main li").eq(sm).addClass("m_on")}
            }
        setInterval("auto()", 1200)
    </script>