JUST 쇼핑몰 문제풀이 6. JS, 제이쿼리 - 메뉴, 슬라이더 효과 (웹디자인 기능사 실기 공개문제)

HTML, CSS가 완성되었고 이제 자바스크립트 코드를 입력하여 효과만 주면 끝!

jquery-1.12.4.min.js

0.09MB

 

제이쿼리를 이용하기 위해서 위의 파일을 script 폴더에 붙여넣은 뒤 (시험장에서 제공해줌)

<script src="./script/jquery-1.12.4.min.js"></script>

위의 코드를 index.html에 삽입하여 제이쿼리 파일과 연결해준다.

 

 

<script src="./script/js.js"></script>

같은 방법으로 내가 작성하는 js파일도 연결시킨다.

이때 제이쿼리 파일이 먼저 위치해야한다.

 

 

메뉴 네비게이션 바 제이쿼리 코드

	$('#header .nav > ul > li > ul').hide();
	$('#header .nav > ul > li > a ').on('mouseenter', function(){
		$(this).addClass('on')
			.next().stop().slideDown();
	});
	$('#header .nav > ul > li').on('mouseleave', function(){
		$(this).children('a').removeClass('on')
			.next().stop().slideUp();
	});

 

잘 작동한다.

이때 F12를 눌러 크롬개발자 도구에서 ctrl+shift+C를 눌러 메뉴를 클릭해보면

 

hover시 class="on"이 추가되고 마우스리브시 on이 사라지며

하이라이트 효과도 잘 적용되고 있다.

 

 

사진 슬라이드 제이쿼리 코드

	var $images = 2;
	var $now = 0;
	var $height = $('.slider ul li').height();
	setInterval(function(){
		if($now == $images) {
			$now = 0;
			$('.slider ul').animate({
				top: $now * -$height
			});
		}
		else {
			$now += 1; 
			$('.slider ul').animate({
				top: $now * -$height
			});
		}
	}, 2500);

2.5초 간격으로 사진의 top값을 조정해줌으로서 슬라이드가 표현되고 있다.