スライドショーの動きについての質問です

お世話になります。
今スライドショーの動きについて学んでいるのですが、Jqeryのコードのどの部分がどのような役割を果たしているのかが関数などについて調べてみましたが今一よく理解できませんでした。
大雑把な質問で大変恐縮なのですが、このスライドショーのコードの意味を教えていただけると幸いです。

jQuery(function ($) {
function changeImage() { 画像変えていく
var $graphic = $('#graphic ul'); ulを代入
var $frontmost = $graphic.children('.now'); nowを代入
var $next;
if($frontmost.next()[0] != undefined){ nowの次の要素がある？　　　　　　　これは次の要素もnowがあるか確認？それともただ次の要素にいく？
$next = $frontmost.next(); あったらnowの次の要素を取得を$nextに代入？

	} else {
		$next = $graphic.children().first();		なかったら現在マッチしている要素のなかで最初の要素取り出す　
	}

	$frontmost.removeClass('now');　　　　　　　nowのクラスを消す
	$next.addClass('now');　　　　　　　　　$nextに代入されている要素にnowクラスをたす
	
}
setInterval(changeImage, 4000);

});
自分なりにですが解釈してみました。

とりあえずif文にて次の要素を探してあったら表示させてるとは思いますが
さいごのremoveClassとaddClassはなんのためにあるのかが分かりません。
良ければご教授頂けると幸いです。

html
1<!DOCTYPE html>
2<html ang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<meta name="viewport" content="width=device-width,initial-scale=1.0">
6		<title>HOTEL IMPERIAL RESORT TOKYO</title>
7		<link rel="stylesheet" href="css/style.css">
8		<link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 480px)">
9	</head>
10	<body>
11		<header id="top">
12			<h1><a href="index.html"><img src="images/logo.png" alt="HOTEL IMPERIAL RESORT TOKYO"></a></h1>
13		</header>
14		<nav>
15			<ul>
16				<li id="nav_concept"><a href="concept.html">結婚式場のコンセプト</a></li>
17				<li id="nav_plan"><a href="plan.html">プランのご案内</a></li>
18				<li id="nav_fair"><a href="fair.html">ブライダルフェア</a></li>
19				<li id="nav_contact"><a href="contact.html">お問い合わせ</a></li>
20			</ul>
21		</nav>
22		<div id="graphic">
23			<ul>
24				<li class="now"><img src="images/slide1.jpg" alt="こだわりの空間で心地よいひとときを" class="image1"></li>
25				<li><img src="images/slide2.jpg" alt"幸福に満ちた神聖なチャペル" class="image2"></li>
26				<li><img src="images/slide3.jpg" alt="「ありがとう」の気持ちが伝わるウェディング"class="image3"></li>
27			</ul>
28		</div>
29		<div id="contents">
30			<div id="main">
31				<section id="news">
32					<h2>お知らせ</h2>
33					<ul>
34						<li><time datetime="2014-04-25">2014年04月25日</time>ランチ・ディナーのテイスティングフェア開催決定。ただいまご予約受付中です。</li>
35						<li><time datetime="2014-03-03">2014年03月03日</time>春の特別見学会</li>
36						<li><time datetime="2014-02-20">2014年02月20日</time>期間限定の割引プラン</li>
37						<li><time datetime="2014-02-14">2014年02月14日</time>バレンタインフェア</li>
38					</ul>
39				</section>
40			</div>
41			<div id="sub">
42				<aside>
43					<div class="bnr_inner">
44						<a href="plan.html">
45						<dl>
46							<dt><img src="images/bnr_plan.jpg" alt="プランのご案内"</dt>
47							<dd>標準のプランをご案内いたします。</dd>
48						</dl>
49						</a>
50					</div>
51					<div class="bnr_inner">
52							<a href="contact.html">
53							<p><img src="images/bnr_contact.png" alt="お問い合わせ"></p>
54							</a>
55					</div>
56				</aside>
57			</div>
58		</div>
59		<footer>
60			<p id="pagetop"><a href="#top">ページの先頭へ戻る</a></p>
61			<address>東京都千代田区X-X-X 電話 0120-000-XXX 営業時間 11:00～22:00(水曜日定休)</address>
62			<p id="copyright"><small>Copyright &copy;2014 HOTEL IMPERIAL RESORT TOKYO ALL rights reserved.</small></p>
63		</footer>
64                <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
65		<script src="js/slideshow.js"></script>
66	</body>
67
68
69</html>

Jquery
1jQuery(function ($) {
2	function changeImage() {
3		var $graphic = $('#graphic ul');
4		var $frontmost = $graphic.children('.now');
5		var $next;
6		if($frontmost.next()[0] != undefined){
7			$next = $frontmost.next();
8			
9		} else {
10			$next = $graphic.children().first();
11		}
12		$frontmost.removeClass('now');
13		$next.addClass('now');
14		
15	}
16	setInterval(changeImage, 4000);
17});

css
1@charset "utf-8";
2
3/* 基本レイアウト ここから↓ */
4 
5@import url(common.css);
6
7body{
8	background-color: #f3f2e9;
9	color: #5f5039;
10	font-size: 87.5%;
11	line-height: 1.5;
12
13
14}
15header,nav,#breadcrumb,#contents,footer{
16	margin: 0 auto;
17	width: 840px;
18
19
20}
21header h1 {
22	text-align: center;
23	padding-top: 28px;
24	margin: 0 0 26px 0;
25
26}
27
28nav ul {
29	list-style-type: none;
30	padding-left: 0;
31	margin: 0 0 20px 0;
32	list-style-position: inside;
33	overflow: hidden;
34}
35nav ul li {
36	float: left;
37	width: 210px;
38}
39
40nav ul li a{
41	overflow: hidden;
42	display: block;
43	padding-top: 44px;
44	height: 0;
45}
46
47nav ul li#nav_concept a {
48	background-image: url(../images/nav1.png)
49}
50nav ul li#nav_plan a {
51	background-image: url(../images/nav2.png)
52}
53nav ul li#nav_fair a {
54	background-image: url(../images/nav3.png)
55}
56
57nav ul li#nav_contact a {
58	background-image: url(../images/nav4.png)
59}
60
61#contents {
62	overflow: hidden;
63}
64
65#main {
66	float: left;
67	width: 570px;
68}
69
70#sub {
71	float: right;
72}
73
74footer{
75	padding-top: 70px;
76}
77
78
79#main h1{
80
81	margin: 0 0 30px 0;
82	padding: 35px 0 35px 65px;
83	font-size: 156.25%;
84	background-image: url(../images/bg_h1_head.png), url(../images/bg_h1_bottom.png);
85	background-repeat: no-repeat, no-repeat;
86	background-position: left top, left bottom;
87	
88}
89
90
91#concept #nav_concept a,
92#plan #nav_plan a,
93#fair #nav_fair a,
94#contact #nav_contact a,
95nav ul li a:hover{
96
97	background-position: 0 -45px;
98
99}
100
101
102
103.bnr_inner a p img:hover {
104
105	opacity: 0.8;
106}
107
108.clearfix::after {
109	content: " ";
110	display: block;
111	clear: both;
112	font-size: 0;
113}
114
115
116/* 基本レイアウト ここまで↑ */
117
118/* トップページ ここから↓ */
119
120#news ul {
121	list-style-type: none;
122	padding-left: 0;
123}
124#news ul li {
125	padding: 20px 0 20px 175px;
126	border-bottom: 1px dotted #6c5f45;
127	color: #342300;
128	text-indent: -175px;
129}
130#news ul li time {
131	display: inline-block;
132	width: 175px;
133	font-weight: bold;
134	color: #6c5f45;
135	text-indent: 0;
136}
137
138/* トップページ ここまで↑ */
139
140
141
142/* 「結婚式場のコンセプト」ページ ここから↓ */
143.concept_box {
144	margin-bottom: 30px;
145
146}
147.image_right {
148	float: right;
149	margin-left: 25px;
150}
151.image_left {
152	float: left;
153	margin-right: 25px;
154}
155
156.concept_box:last-child,
157.concept_box p:last-child{
158	margin-bottom: 0;
159}
160	
161/* 「結婚式場のコンセプト」ページ ここまで↑ */
162
163
164/* 「プランのご案内」ページ ここから↓ */
165table {
166	border-collapse:collapse;
167}
168
169
170caption {
171	text-align: left;
172	margin-bottom: 30px;
173}
174caption p {
175	margin-top: 0;
176	margin-bottom: 0;
177}
178
179
180
181table th,table td {
182	padding: 15px;
183	border: 1px solid #6c5f45;
184}
185
186table tr th:first-child {
187	width: 70px;
188}
189
190table tbody th,
191table tbody td{
192	vertical-align: top;
193}
194table thead tr th {
195	background-color: #eee8cc;
196}
197table tbody tr:nth-child(odd) {
198	background-color:#ffffff;
199}
200table tbody tr:nth-child(even) {
201	background-color: #f4f2f0;
202}
203/* 「プランのご案内」ページ ここまで↑ */
204
205/* 「ブライダルフェア」ページ ここから↓ */
206
207.gallery_box figure {
208	margin: 0 0 15px 15px;
209	width: 180px;
210	float: left;
211}
212.gallery_box figure:first-child {
213	margin-left: 0;
214}
215.gallery_box:first-of-type {
216	margin-top: 30px;
217
218}
219/* 「ブライダルフェア」ページ ここまで↑ */
220
221/* 「お問い合わせ」ページ ここから↓ */
222form p{
223
224	margin-top: 0;
225	margin-bottom: 30px;
226}
227form p:nth-last-child(2){
228	margin-bottom: 7px;
229}
230form o:last-child {
231	margin-bottom: 0;
232}
233
234input[type="text"]{
235	width: 200px;
236}
237input[type="email"]{
238	width: 300px;
239}
240
241
242textarea {
243	width: 420px;
244	height: 115px;
245	overflow-y: scroll;
246}
247/* 「お問い合わせ」ページ ここまで↑ */
248

commoncss
1
2@charset "utf-8";
3
4body {
5	margin: 0;
6	padding: 0;
7	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
8	font-size: 100%;
9}
10img {
11	border: 0;
12}
13a {
14	color: #342300;
15}
16a:hover {
17	color: #a24100;
18}
19header h1 a {
20	display: inline-block;
21}
22header h1 a img {
23	vertical-align: bottom;
24}
25#breadcrumb ul {
26	list-style-type: none;
27	padding: 0;
28}
29#breadcrumb ul li {
30	display: inline;
31	margin-right: 5px;
32}
33#breadcrumb ul li a {
34	padding-right: 15px;
35	background-image: url(../images/breadcrumb_arrow.png);
36	background-repeat: no-repeat;
37	background-position: right center;
38}
39.bnr_inner {
40	margin-bottom: 30px;
41}
42.bnr_inner dt img{
43	margin-bottom: 6px;
44	vertical-align: bottom;
45}
46.bnr_inner a {
47	text-decoration: none;
48}
49.bnr_inner dl, .bnr_inner dt, .bnr_inner dd, .bnr_inner p{
50	margin: 0;
51}
52#pagetop {
53	margin-top: 0;
54	margin-bottom: 0;
55	float: right;
56}
57#pagetop a {
58	display: block;
59	min-height: 16px;
60	padding: 6px 0 6px 28px;
61	background-image: url(../images/bg_arrow.png);
62	background-repeat: no-repeat;
63	background-position: left bottom;
64}
65address {
66	padding-top: 15px;
67	clear: both;
68	background-image: url(../images/bg_footer.png);
69	background-repeat: no-repeat;
70	font-style: normal;
71	text-align: center;
72}
73#copyright {
74	margin-top: 0;
75	margin-bottom: 15px;
76	text-align: center;
77}
78#copyright small {
79	font-size: 100%;
80}
81#main h2 {
82	margin-top: 0;
83	padding: 13px 0 13px 24px;
84	background-image: url(../images/bg_h2_head.png), url(../images/bg_h2_bottom.png);
85	background-repeat: no-repeat, no-repeat;
86	background-position: left top, left bottom;
87	font-size: 112.5%;
88}
89#graphic {
90	width: 840px;
91	height: 400px;
92	margin: 0 auto 30px auto;
93}
94#graphic ul {
95	position: relative;
96	list-style: none;
97	padding-left: 0;
98}
99#graphic ul li {
100	display: block;
101	position: absolute;
102	top: 0;
103	left: 0;
104	z-index: 0;
105	opacity: 0;
106	transition: opacity 1s ease-in-out;
107}
108#graphic ul li.now {
109	display: block;
110	position: relative;
111	top: 0;
112	left: 0;
113	z-index: 1;
114	opacity: 1;
115}

kei344

2020/06/10 11:52

https://teratail.com/help/question-tips#questionTips2 > 質問をする前に自分で何がわからないのかを把握しましょう

mimuratakasi

2020/06/10 11:57

ありがとうございます！

oec

2020/06/15 02:36

手元で動かせるかなと思って試したんですが、cssがないので、それぞれの役割がみえませんでした。 CSSを載せてもらえると大変わかりやすいかと思います。また、JQueryライブラリのimportができていないと動かないので、jQueryが動くようにしておくといいと思います。 ↓こんなかんじのタグ埋め込んでおくといいと思います。↓ <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>