이번에는 회전목마(carousel) 슬라이드쇼를 '제이쿼리'로 작성해 볼거야.
먼저 아래 링크에서 데모화면 부터 확인해 보자구.

http://yogibbs.kr/jsDemo/carousel1-jquery.html

자바스크립트(바닐라스크립트)로 했던 화면과 똑같지?
사실 바닐라스크립트에서 학습했던 회전목마의 원형이 바로 '제이쿼리'로 만든 것이었어.
검색한 회전목마 슬라이드쇼 구현 소스 중에서 제일 쉽고 간단한 소스를 찾다 발견한 것이 바로 아래의 블로그였어.

https://m.blog.naver.com/jcosmoss/221179156611

그래서 이 로직을 토대로 제이쿼리로 만들어진 원본을 내가 바닐라스크립트로 다시 작성해서 학습재료로 썼던 거였어.
즉 제이쿼리의 함수를 순수 자바스크립트 함수로 바꾼거지.
그러니 사실 둘은 같은 것이라고 할 수도 있어.
그럼 제이쿼리로 만든 화면의 주요 소스를 한 번 볼까?

<script>
	var $banner = $(".banner ul");
	var $img = $(".banner img");
	var $bannerWidth  = $(window).width(); //윈도우 창 크기 (배너 이미지 폭)
	var $bannerLength = 3; //배너 이미지의 갯수
	$banner.css("width", $bannerWidth * $bannerLength + "px");// 배너창 크기
	$img.css("width", $bannerWidth + "px"); // 그림1장 크기

	var rollingId =	setInterval(function() { rollingStart(); }, 4000);//다음 이미지로 롤링 애니메이션 할 시간차
	
	function rollingStart() {
		$img = $(".banner img");
		$bannerWidth = $( window ).width(); // 중간에 창크기를 변경할 때를 대비해 윈도우창 크기 다시 계산
		$banner.css("width", $bannerWidth * $bannerLength + "px");
		$img.css("width", $bannerWidth + "px");
		//배너의 좌측 위치를 옮겨 준다.
		$banner.animate({left: - $bannerWidth + "px"}, 2000, function() { //숫자는 롤링 진행되는 시간이다.
			//첫번째 이미지를 마지막 끝에 복사(이동이 아니라 복사)해서 추가한다.
			$(this).append("<li>" + $(this).find("li:first").html() + "</li>");
			//뒤로 복사된 첫번재 이미지는 필요 없으니 삭제한다.
			$(this).find("li:first").remove();
			//다음 움직임을 위해서 배너 좌측의 위치값을 초기화 한다.
			$(this).css("left", 0);
			//이 과정을 반복하면서 계속 롤링하는 배너를 만들 수 있다.
		});
	}
</script>

우리는 이미 바닐라스크립트를 공부했었으니 큰 흐름은 이해 될거야.
여기서는 var $banner 처럼 변수의 이름에도 $ 를 붙였는데 안 붙여도 돼.
(그냥 var banner 처럼 사용해도 돼. 혹시나 제이쿼리로 쓸때는 변수에도 $ 붙이나?.. 생각할까 말해 두는 거야.)
기왕이면 원본과 비슷하게 하려고 이름도 비슷하게 두었어.

새로 나온 함수(메소드)라면 요소의 가로폭을 구할 때 width( )를 사용하고, transition과 transform 의 기능을 animate( )로 대신 한 것을 볼 수 있어.
그리고 find( ), html( ), append( ), remove( ) 등을 사용해서 첫번째 li 태그를 찾아 맨 뒤에 붙인 뒤 첫째 태그를 제거했어.
메소드 이름 만으로도 대충 어떤 역할을 하는 것인지 이해가 되지?

이제 여러분들이 할 일은 인터넷에서 이 각각의 메소드를 검색해서 어떤 기능들이고, 어떻게 사용하는지 알아 보는 일이야.
이런 식으로 배워 가면 자신이 직접 경험했던 명령들이기 때문에 잘 잊혀지지도 않아.

위 내가 인용한 원본 소스에 들어가 보면 회전목마가 돌아가고 있을 때, 그림 위에 마우스를 올리면 회전이 멈추는 기능도 설명하고 있으니 그 부분도 꼭 한번 읽어 봐.
또 그림 회전을 왼쪽으로 돌지 않고 위로 밀려 올라가는 소스에 대해서도 설명하고 있으니 읽어 보면 좋을것 같아.