jqueryで時間差でaddClassとremoveClass処理を繰り返したい

下記サイトのトップイメージのようなスライドショーを作成したいのですがうまくいきません。

http://www.passivedesign.jp/

具体的には下記のようなコードでフェードインするliに.showを、フェードアウトするliに.hideを順番に振ってループさせる処理がしたいのです。（cssは省略してあります）

<ul>
	<li><img src="img/img1.jpg"></li>
	<li><img src="img/img2.jpg"></li>
	<li><img src="img/img3.jpg"></li>
</ul>

ようやくセレクタやメソッドの書き方を覚えた程度の初心者に、皆様のお知恵を貸していただければ幸いです。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6		<style type="text/css">
7			.slideshow li {
8				display: none;
9			}
10			.slideshow li.on {
11				display: inline;
12			}
13		</style>
14	</head>
15	<body>
16		<ul class="slideshow">
17			<li class="on"><img src="http://dummyimage.com/600x400/F00/fff"></li>
18			<li><img src="http://dummyimage.com/600x400/0f0/fff"></li>
19			<li><img src="http://dummyimage.com/600x400/00f/fff"></li>
20		</ul>
21		<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
22		<script type="text/javascript">
23			$(function () {
24				var slide = function () {
25					$("li:not(.on)").hide();
26					$("li.on").fadeOut('slow', function () {
27						$(this).removeClass('on');
28						if ($(this).next('li').length === 1) {
29							$(this).next('li').fadeIn('slow').addClass('on');
30						} else {
31							$("li:first").fadeIn('slow').addClass('on');
32						}
33					});
34				};
35				setInterval(slide, 2000);
36			});
37		</script>
38	</body>
39</html>